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

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>