動的に作成されたドロップダウン複数の追加が機能しない

私は動的に作成する<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は、ボトル（Pythonのフレームワーク）によって生成されます。私はオプションの値をハードコードしません、彼らはデータベースからフェッチされます。

出典

2016-10-12 ShadowFlame

あなたは選択ボックスの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()); 
}

出典

2016-10-12 14:36:10

uはそれに私を打つ:) –

どうもありがとう、それはそのように働い知りませんでした:(より多くのあなたが知っている：D – ShadowFlame

@SajjanSarkar、申し訳ありません、運がいいよ:) –

動的に作成されたドロップダウン複数の追加が機能しない

答えて

関連する問題