如何创建在特定下拉列表中选择某个值时出现的下拉列表？

<form>
  <label for="mainSelect">主要下拉列表：</label>
  <select id="mainSelect" onchange="showTargetSelect()">
    <option value="">请选择</option>
    <option value="option1">选项1</option>
    <option value="option2">选项2</option>
    <option value="option3">选项3</option>
  </select>

  <label for="targetSelect">目标下拉列表：</label>
  <select id="targetSelect">
    <option value="">请选择</option>
  </select>
</form>

function showTargetSelect() {
  // 获取主要下拉列表的值
  var mainSelectValue = document.getElementById("mainSelect").value;

  // 获取目标下拉列表元素
  var targetSelect = document.getElementById("targetSelect");

  // 清空目标下拉列表的选项
  targetSelect.innerHTML = "";

  // 根据主要下拉列表的值，动态生成目标下拉列表的选项
  if (mainSelectValue === "option1") {
    targetSelect.innerHTML += "<option value='targetOption1'>目标选项1</option>";
    targetSelect.innerHTML += "<option value='targetOption2'>目标选项2</option>";
  } else if (mainSelectValue === "option2") {
    targetSelect.innerHTML += "<option value='targetOption3'>目标选项3</option>";
    targetSelect.innerHTML += "<option value='targetOption4'>目标选项4</option>";
  } else if (mainSelectValue === "option3") {
    targetSelect.innerHTML += "<option value='targetOption5'>目标选项5</option>";
    targetSelect.innerHTML += "<option value='targetOption6'>目标选项6</option>";
  }
}