添加選擇選項和其他選擇標簽

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

• 如何一次添加兩個以上的選項？ 現在，我只能將一項添加到<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> 

Answer 2

一種方法是使用Select add（）方法 。 然后，您必須使用remove方法才能remove添加的elements 。

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

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