为什么将整个数组元素添加到SelectBox中而不是仅添加一个新元素

Question

昨天我成功地在数组中添加了新元素，但是现在我陷入了困境，因为当我尝试在下拉框中显示这些元素时，每次在数组中添加新元素时，它都会再次将整个数组添加到列表中，而不是用户仅将新元素添加到数组中。

这是我的代码段。

 var fruits = ["Banana", "Orange", "Apple", "Mango"]; document.getElementById("showList").innerHTML = fruits; var newItem = document.getElementById("addItemInStock"); function addToStock() { if ((newItem.value) === "") { document.getElementById("errorMsg").innerHTML = "Blank item cannot be added!!"; document.getElementById("errorMsg").style.display = "block"; } else { document.getElementById("errorMsg").style.display = "none"; fruits.push(newItem.value); document.getElementById("showList").innerHTML = fruits; clearAndShow(); } var sel = document.getElementById("showInDropDown"); for (var i = 0; i < fruits.length; i++) { var opt = document.createElement('option'); opt.innerHTML = fruits[i]; fruits opt.value = fruits[i]; sel.appendChild(opt); } } function clearAndShow() { newItem.value = ""; } 

 <label>Enter an New item to add in Stock</label> <br> </br> <input type="text" name=" itemName" id="addItemInStock"> <br></br> <p id="errorMsg"></p> <button onclick="addToStock()">Add</button> <!-- <label>Remove Item from Stock</label><br> </br> <input type="text" name=" itemName" id="RemoveToStock"> </input><br></br> <button onclick="removeFromStock()">Remove</button>--> <p id="showList"></p> <select id="showInDropDown"></select> 

Answer 1

您需要清除dropdowm值

 var fruits = ["Banana", "Orange", "Apple", "Mango"]; document.getElementById("showList").innerHTML = fruits; var newItem = document.getElementById("addItemInStock"); function addToStock() { if ((newItem.value) === "") { document.getElementById("errorMsg").innerHTML = "Blank item cannot be added!!"; document.getElementById("errorMsg").style.display = "block"; } else { document.getElementById("errorMsg").style.display = "none"; fruits.push(newItem.value); document.getElementById("showList").innerHTML = fruits; clearAndShow(); } var sel = document.getElementById("showInDropDown"); document.getElementById("showInDropDown").innerHTML = ""; for (var i = 0; i < fruits.length; i++) { var opt = document.createElement('option'); opt.innerHTML = fruits[i]; fruits opt.value = fruits[i]; sel.appendChild(opt); } } function clearAndShow() { newItem.value = ""; } 

 <label>Enter an New item to add in Stock</label> <br> </br> <input type="text" name=" itemName" id="addItemInStock"></input> <br></br> <p id="errorMsg"></p> <button onclick="addToStock()">Add</button> <!-- <label>Remove Item from Stock</label><br> </br> <input type="text" name=" itemName" id="RemoveToStock"> </input><br></br> <button onclick="removeFromStock()">Remove</button>--> <p id="showList"></p> <select id="showInDropDown"></select> 

Answer 2

这是因为您要再次将所有元素添加到选择中。

var sel = document.getElementById("showInDropDown");
for (var i = 0; i < fruits.length; i++) {
  var opt = document.createElement('option');
  opt.innerHTML = fruits[i];
  fruits
  opt.value = fruits[i];
  sel.appendChild(opt);
}

只需将当前元素添加到选择中即可。

 var fruits = ["Banana", "Orange", "Apple", "Mango"]; document.getElementById("showList").innerHTML = fruits; var newItem = document.getElementById("addItemInStock"); function addToStock() { if ((newItem.value) === "") { document.getElementById("errorMsg").innerHTML = "Blank item cannot be added!!"; document.getElementById("errorMsg").style.display = "block"; } else { document.getElementById("errorMsg").style.display = "none"; fruits.push(newItem.value); document.getElementById("showList").innerHTML = fruits; var sel = document.getElementById("showInDropDown"); //for (var i = 0; i < fruits.length; i++) { var opt = document.createElement('option'); opt.text = newItem.value; opt.value = newItem.value; sel.appendChild(opt); //} clearAndShow(); } } function clearAndShow() { newItem.value = ""; } 

 <label>Enter an New item to add in Stock</label> <br> </br> <input type="text" name=" itemName" id="addItemInStock"></input> <br></br> <p id="errorMsg"></p> <button onclick="addToStock()">Add</button> <!-- <label>Remove Item from Stock</label><br> </br> <input type="text" name=" itemName" id="RemoveToStock"> </input><br></br> <button onclick="removeFromStock()">Remove</button>--> <p id="showList"></p> <select id="showInDropDown"></select>