Javascript 动态创建的下拉列表多个附件不起作用_Javascript_Html

Javascript 动态创建的下拉列表多个附件不起作用

javascript html

Javascript 动态创建的下拉列表多个附件不起作用,javascript,html,Javascript,Html,我有一个动态创建的。当我单击一个按钮时，它应该被添加到div的末尾。但是，当我单击多次时，它不会被添加多次，而我期望它会被添加多次完整代码如下： <html> <head> <title>New Recipe</title> <script type="text/javascript"> function showfield(name, hiddenId, inputName){ if(name == 'New'){ d

我有一个动态创建的。当我单击一个按钮时，它应该被添加到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：

PS:HTML是由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());
}

你打败了我：非常感谢，我不知道它是这样工作的：你知道的越多：D@SajjanSarkar，对不起，我很幸运：@ShadowFlame，当然：。如果你认为答案有帮助，就接受它。刚刚做了，由于时间限制还不能：D