ShadowFlame ShadowFlame - 1 month ago 13
HTML Question

dynamically created dropdown multiple appends don't work

I have a

<select>
which I dynamically create.
When I click a button, this should be added to the end of the div. However, when I click multiple times, it isn't added multiple times, while I expected it to.

Full code below:

<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 is generated by Bottle(python framework). I do not hardcode the values in the options, they are fetched from a database.

Answer

You've created just one instance of selectbox:

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

And then you reuse it. So it's being removed from the old place in DOM and inserted into another.

Here is how it can work:

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