初心者のJavascript配列のドロップダウンリスト

Question

ここでNewbie JSは、10の都市の配列からドロップダウンリストを設定する必要があり、動作するコードを取得できません。

<select id="selectCity"> 
<option>Choose a City</option> 
</select> 

var select = document.getElementById('selectCity'); 
var options = ["Winthrop","Revere","Malden","East Boston","Medford","Somerville","South Boston","Quincy","Malden","Weymouth"]; 

//what code will work in this loop below??? 

for(var i = 0; i < options.length; i++) { 

} 

Answer 1

このコードを試してください。

var select = document.getElementById('selectCity'); 
var options = ["Winthrop","Revere","Malden","East Boston","Medford","Somerville","South Boston","Quincy","Malden","Weymouth"]; 

for(var i = 0; i < options.length; i++) { 
    var opt = options[i]; 
    var el = document.createElement("option"); 
    el.textContent = opt; 
    el.value = opt; 
    select.appendChild(el); 
}​ 

Answer 2

あなたのためにこれ

var select = document.getElementById('selectCity'); 
 
var options = ["Winthrop", "Revere", "Malden", "East Boston", "Medford", "Somerville", "South Boston", "Quincy", "Malden", "Weymouth"]; 
 

 
//what code will work in this loop below??? 
 

 
var s = document.getElementById("selectCity"); 
 
for (var i = 0; i < options.length; i++) { 
 
    s.innerHTML += `<option value=${i}> ${options[i]}</option>`; 
 
}

<select id="selectCity"> 
 
    <option>Choose a City</option> 
 
</select>

Answer 3

それはよ作品を試してみてください！

あなたは自分のループでこのコードを配置する必要があります。

VARオプション=のdocument.createElement（ "オプション"）;

option.text = options [i];

option.value = options [i];

select.appendChild（オプション）;

<select id="selectCity"> 
 
    <option>Choose a City</option> 
 
</select> 
 

 
<script type="text/javascript"> 
 
    var select = document.getElementById('selectCity'); 
 
    var options = ["Winthrop","Revere","Malden","East Boston","Medford","Somerville","South Boston","Quincy","Malden","Weymouth"]; 
 
    for(var i = 0; i < options.length; i++) { 
 
     var option = document.createElement("option"); 
 
     option.text = options[i]; 
 
     option.value = options[i]; 
 
     select.appendChild(option); 
 
    } 
 
</script>