Question

假设有一个像这样的选择菜单：“

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

我希望用数组值["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

您可以在这里like

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('');

<强> The demo.

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);
}

＆＃34;没有循环＆＃34;要求真是个坏主意。这是在本机JS中构建列表的最有效方法。（除了循环中的微优化）

它也不会对已经渲染的DOM元素使用innerHTML，从而避免浏览器重新构建整个DOM。

使用javascript填充选择菜单选项

4 个答案: