初學者Javascript陣列下拉列表

Question

新手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（option）;

<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>