36

我有一个文本文件，我正在读取数据并将其存储在一个 javascript 数组中，它是一个美食列表。我想使用数组来填充下拉选择框。我知道如何在下拉框的值中硬编码（如果我错了，使用纠正我），但我希望能够使用数组来填充它。

<script type="text/javascript">
var cuisines = ["Chinese","Indian"];            
</script>

<select id="CusineList"></select>

为了简单起见，我硬编码了一个数组，“CuisineList”是我的下拉框

4

2 回答 2

88

使用for循环遍历您的数组。对于每个字符串，创建一个新option元素，将字符串分配为其innerHTMLand value，然后将其附加到select元素。

var cuisines = ["Chinese","Indian"];     
var sel = document.getElementById('CuisineList');
for(var i = 0; i < cuisines.length; i++) {
    var opt = document.createElement('option');
    opt.innerHTML = cuisines[i];
    opt.value = cuisines[i];
    sel.appendChild(opt);
}

演示

更新：使用createDocumentFragment和forEach

如果您有一个非常大的要附加到文档的元素列表，则单独附加每个新元素可能是无效的。DocumentFragment充当可用于收集元素的轻量级文档对象。一旦你的所有元素都准备好了，你可以执行一个appendChild操作，这样 DOM 只更新一次，而不是n多次。

var cuisines = ["Chinese","Indian"];     

var sel = document.getElementById('CuisineList');
var fragment = document.createDocumentFragment();

cuisines.forEach(function(cuisine, index) {
    var opt = document.createElement('option');
    opt.innerHTML = cuisine;
    opt.value = cuisine;
    fragment.appendChild(opt);
});

sel.appendChild(fragment);

演示

于 2012-06-29T02:15:29.430 回答
4

这是我最近编写的 REST 服务的一部分。

var select = $("#productSelect")
for (var prop in data) {
    var option = document.createElement('option');
    option.innerHTML = data[prop].ProduktName
    option.value = data[prop].ProduktName;
    select.append(option)
}

我发布这个的原因是因为 appendChild() 在我的情况下不起作用，所以我决定提出另一种同样有效的可能性。

于 2016-04-29T09:19:14.097 回答