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

问题描述

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

I have a text file which I am reading and storing the data in a javascript array, it's a list of cuisines. I want to use the array to fill up a drop down select box. I know how to hard code in the values for the drop down box (using correct me if i'm wrong) but I want to be able to use the array to fill it up instead.

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

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

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

I have hard coded an array for simplicity, the "CuisineList" is my drop down box

推荐答案

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

Use a for loop to iterate through your array. For each string, create a new option element, assign the string as its innerHTML and value, and then append it to the select element.

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

UPDATE: Using createDocumentFragment and forEach

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

If you have a very large list of elements that you want to append to a document, it can be non-performant to append each new element individually. The DocumentFragment acts as a light weight document object that can be used to collect elements. Once all your elements are ready, you can execute a single appendChild operation so that the DOM only updates once, instead of n times.

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

演示

这篇关于使用 javascript 数组填充下拉选择框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！