使用其他选择标记添加选择选项

Question

我想使用<select id="dropdown_for_add">在<select id="mySelect">

中添加列表

如果我选择＆＃34;添加项目＆＃34;选项，它将在<select id="mySelect">

中添加选项

问题是

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

  项目

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

＆＃13;

＆＃13;

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);
  }

}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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>

Answer 2

一种方法是使用Select add() Method。然后，您必须使用remove方法才能remove添加elements。

＆＃13;

＆＃13;

function myFunction() {
   if (document.getElementById("dropdown_for_add").value == 2) {
     var x = document.getElementById("mySelect");
     var option = document.createElement("option");
      x.add(new Option('Item1',"Item1"));
      x.add(new Option('Item2',"Item2"));
   }
   else{
      
       var x = document.getElementById("mySelect");
       if(x[x.length-1].text=="Item2"){
          x.remove(x.length-1);
          x.remove(x.length-1);
       }
   }
 }

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;