為什么將整個數組元素添加到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>