javascript - 添加带有其他选择标签的选择选项

Question

我想使用<select id="dropdown_for_add">将列表添加到 <select id="mySelect">

如果我选择“添加项目”选项，它将在 <select id="mySelect"> 中添加选项

问题是

• 添加项目后，如果我选择 <select id="dropdown_for_add"> 的其他选项(A、B、C选项)，我想删除最近添加的<select id="mySelect">项

• 如何一次添加两个以上的选项？现在我只能将一项添加到 <select id="mySelect">

function myFunction() {
  if (document.getElementById("dropdown_for_add").value == 2) {
    var x = document.getElementById("mySelect");
    var option = document.createElement("option");
    option.text = "Item1";
    x.add(option);
    option.text = "Item2";
    x.add(option);
  }

}

<form>
  <select id="mySelect">
    <option>Apple</option>
    <option>Pear</option>
    <option>Banana</option>
    <option>Orange</option>
  </select>

  <select id="dropdown_for_add" onchange="myFunction()">

    <option value="1">A</option>
    <option value="2">Add item</option>
    <option value="3">B</option>
    <option value="4">C</option>
  </select>
</form>
<br>

Answer 1

这是预期的行为。由于 option 引用相同的 DOM 元素，因此您不能将其追加两次，最简单的解决方案是创建另一个 option。

 var option2 = document.createElement("option");
 option2.text = "Item2";
 x.add(option2);

删除已迭代的选项

if (document.getElementById("dropdown_for_add").value == 2) {
    ...
} else {
    for (var i = x.length - 1; i >= 0; i--) {
        if (x.options[i].value == 'Item1' || x.options[i].value == 'Item2') {
            x.remove(i);
        }
    }
}

function myFunction() {
  var x = document.getElementById("mySelect");
  if (document.getElementById("dropdown_for_add").value == 2) {
    var option = document.createElement("option");
    option.text = "Item1";
    x.add(option);
    var option2 = document.createElement("option");
    option2.text = "Item2";
    x.add(option2);
  } else {
    for (var i = x.length-1; i >= 0; i--) {
      if (x.options[i].value == 'Item1' || x.options[i].value == 'Item2') {
        x.remove(i);
      }
    }
  }
}

<select id="dropdown_for_add" onchange="myFunction()">
  <option value="1">A</option>
  <option value="2">Add item</option>
  <option value="3">B</option>
  <option value="4">C</option>
</select>

<select id="mySelect">
  <option>Apple</option>
  <option>Pear</option>
  <option>Banana</option>
  <option>Orange</option>
</select>

<小时/>

其他选项是使用cloneNode()

 var option2 = option.cloneNode();
 option2.text = "Item2";
 x.add(option2);

function myFunction() {
  var x = document.getElementById("mySelect");
  if (document.getElementById("dropdown_for_add").value == 2) {
    var option = document.createElement("option");
    option.text = "Item1";
    x.add(option);
    var option2 = option.cloneNode();
    option2.text = "Item2";
    x.add(option2);
  } else {
    for (var i = x.length-1; i >= 0; i--) {
      if (x.options[i].value == 'Item1' || x.options[i].value == 'Item2') {
        x.remove(i);
      }
    }
  }
}

<select id="dropdown_for_add" onchange="myFunction()">
  <option value="1">A</option>
  <option value="2">Add item</option>
  <option value="3">B</option>
  <option value="4">C</option>
</select>

<select id="mySelect">
  <option>Apple</option>
  <option>Pear</option>
  <option>Banana</option>
  <option>Orange</option>
</select>