动态创建的下拉多个追加不能工作

dynamically created dropdown multiple appends don't work

本文关键字：追加 不能 工作 创建 动态      更新时间：2023-09-26

我有一个动态创建的<select>。当我单击一个按钮时，它应该被添加到div的末尾。然而，当我多次单击时，它没有被添加多次，而我期望它被添加多次。

完整代码如下:

<html>
<head>
<title>New Recipe</title>
<script type="text/javascript">
function showfield(name, hiddenId, inputName){
  if(name == 'New'){
    document.getElementById(hiddenId).innerHTML='New: <input type="text" name="other" />';
  }
  else {
    document.getElementById(hiddenId).innerHTML='';
  }
}
</script>
</head>
<body>
<script type="text/javascript">
var selectBox = document.createElement("select");
      var option = document.createElement("option");
      option.text = "Chocolade: Zwart";
      option.value = "1-1";
      selectBox.add(option);

      var option = document.createElement("option");
      option.text = "Zuivel: Boter(80%)";
      option.value = "2-2";
      selectBox.add(option);

      var option = document.createElement("option");
      option.text = "Zuivel: Room(40%)";
      option.value = "2-3";
      selectBox.add(option);

      var option = document.createElement("option");
      option.text = "Smaakmakers: Koffie-extract";
      option.value = "3-4";
      selectBox.add(option);

function addNewIngredient(divId){
  var amountPart = "Amount(in kg or l): <input type='"text'"/>";
  console.log("clicked");
    //document.getElementById(divId).appendChild(selectBox + amountPart + '<br/>');
    document.getElementById(divId).appendChild(selectBox);
}
</script>
<form method="post" action="/new/recipe">
  category: <select name="category" onchange="showfield(this.options[this.selectedIndex].value, 'newCategory')">
              <option value="NONE">Please select ....</option>
              <option value="New">New</option>
            </select>
  <div id="newCategory"></div><br/>
  <div id="ingredientList"></div>
  <input type="button" onclick="addNewIngredient('ingredientList')" value="Add Ingredient"/>
  <input type="submit" value="Submit">
</form>
</body>
</html>

JSFiddle: https://jsfiddle.net/w42m6voj/

PS: HTML由Bottle(python框架)生成。我没有硬编码选项中的值，它们是从数据库中获取的。

您只创建了一个selectbox实例:

var selectBox = document.createElement("select");

然后重用它。因此，它被从DOM的旧位置删除并插入到另一个位置。

下面是它的工作原理:

function createNewSelectBox() {
    var selectBox = document.createElement("select");
      var option = document.createElement("option");
      option.text = "Chocolade: Zwart";
      option.value = "1-1";
      selectBox.add(option);

      var option = document.createElement("option");
      option.text = "Zuivel: Boter(80%)";
      option.value = "2-2";
      selectBox.add(option);

      var option = document.createElement("option");
      option.text = "Zuivel: Room(40%)";
      option.value = "2-3";
      selectBox.add(option);

      var option = document.createElement("option");
      option.text = "Smaakmakers: Koffie-extract";
      option.value = "3-4";
      selectBox.add(option);
    return selectBox;
}

function addNewIngredient(divId){
  var amountPart = "Amount(in kg or l): <input type='"text'"/>";
  console.log("clicked");
    //document.getElementById(divId).appendChild(selectBox + amountPart + '<br/>');
    document.getElementById(divId).appendChild(createNewSelectBox());
}
相关文章：