使用javascript填充選擇菜單選項

Question

假設有一個選擇菜單，如下所示：“

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

我希望用一個數組值["apple","mango","banana"];填充它["apple","mango","banana"];
如何在不使用任何循環構造的情況下一次性實現這一目標？

Answer 1

如果不使用循環，您將執行以下操作：

var x = document.getElementById("dropDown");
var option = document.createElement("option");
option.innerHTML = "apple";
x.appendChild(option);

option = document.createElement("option");
option.innerHTML = "mango";
x.appendChild(option);

option = document.createElement("option");
option.innerHTML = "banana";
x.appendChild(option);

顯然，這是假設您知道數組值將提前。 但是，最常用的方法是使用循環遍歷數組。

Answer 2

在這里你可以喜歡

var arr = ["apple", "mango", "banana"];
document.getElementById('dropdown').innerHTML =
    '<option>' + arr.join('</option><option>') + '</option>';

JSFiddle

Answer 3

如果您只是想不使用for / while這樣的循環構造：

document.getElementById('dropDown').innerHTML = ["apple","mango","banana"].map(function(e) {
  return "<option>"+e+"</option>";
}).join('');

演示。

Answer 4

您需要這樣做：

var options = ["apple","mango","banana"],
    select = document.getElementById('dropDown');

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

“無循環”要求確實是一個壞主意。 這是使用本地JS構建列表的最有效方法。 （除了循環中的微優化之外）

它還不會在已呈現的DOM元素上使用innerHTML ，從而避免了瀏覽器重新構造整個DOM的需要。