javascript - 为什么在 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

您需要清除下拉值

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>