javascriptで選択を追加するには

Question

選択タグにオプションを追加しようとしていますが、機能していません。

container.appendChild(document.createTextNode("location")); 
var select = document.createElement("select"); 
var option1 = document.createElement("option"); 
option1.text = "mumbai"; 
option1.value = "mumbai"; 
container.appendChild(option1); 
container.appendChild(select); 

Answer 1

あなたは要素の代わりに、コンテナ要素を選択するために、オプション1の要素を追加しています。

変更ライン：

container.appendChild(option1); 

へ：

select.appendChild(option1); 

Answer 2

オプションをコンテナに追加していますが、選択肢には追加しません。だから、select.appendChild(option1);へcontainer.appendChild(option1);を変更します。

var container = document.getElementById('elem') 
 
container.appendChild(document.createTextNode("location")); 
 
var select = document.createElement("select"); 
 
container.appendChild(select); 
 
var counter = 0; 
 
document.getElementById("btn").addEventListener("click", function() { 
 
    counter++; 
 
    var option1 = document.createElement("option"); 
 
    option1.text = "mumbai" + counter; 
 
    option1.value = "mumbai" + counter; 
 
    select.appendChild(option1); 
 
});

<div id='elem'> 
 

 
</div> 
 
<button name='btn' id='btn'>Add</button>

Answer 3

別の方法は、選択のoptionsリストに追加することです。

var select = document.getElementById('select'); 
 
var options = select.options; 
 
options[options.length] = new Option("Option 1", "1"); 
 
options[options.length] = new Option("Option 2", "2");

<select id="select"></select>

---

HTMLSelectElement.add()別の可能性です。

var sel = document.createElement("select"); 
 
var opt1 = document.createElement("option"); 
 
var opt2 = document.createElement("option"); 
 

 
opt1.value = "1"; 
 
opt1.text = "Option: Value 1"; 
 

 
opt2.value = "2"; 
 
opt2.text = "Option: Value 2"; 
 

 
sel.add(opt1, null); 
 
sel.add(opt2, null); 
 

 
document.body.appendChild(sel);