使用javascript数组填充下拉选择框

Question

我有一个文本文件,我正在阅读并将数据存储在一个javascript数组中,这是一个美食列表.我想使用数组来填充下拉选择框.我知道如何在下拉框的值中硬编码(如果我错了,请使用正确的我),但我希望能够使用数组填充它.

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

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

为简单起见,我对数组进行了硬编码,"CuisineList"是我的下拉框

Answer 1

使用for循环迭代您的数组.对于每个字符串,创建一个新的option元素,指定字符串作为其innerHTML和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);
}

DEMO

更新:使用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);

DEMO