初学者Javascript数组下拉列表[重复]答案

【问题标题】：Beginner Javascript array dropdown list [duplicate]初学者Javascript数组下拉列表[重复]
【发布时间】：2016-11-26 17:59:42
【问题描述】：

这里是新手 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++) { 

}

【问题讨论】：

stackoverflow.com/questions/8674618/…

标签： javascript

【解决方案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);
}

【讨论】：

【解决方案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>

【讨论】：

【解决方案3】：

它会为你工作！

你只需要把这段代码放在你的循环中：

var option = document.createElement("option");

option.text = 选项[i];

option.value = 选项[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>

【讨论】：