Question

我有动态创建的<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框架）生成。我没有硬编码选项中的值，它们是从数据库中提取的。

Answer 1

您只创建了一个选择框实例：

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());
}

动态创建下拉列表多个附加功能无法正常工作

1 个答案: