使用 javascript 数组填充下拉选择框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11255219/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
use a javascript array to fill up a drop down select box
提问by Ameya
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.
我有一个文本文件，我正在读取它并将数据存储在一个 javascript 数组中，它是一个美食列表。我想使用数组来填充下拉选择框。我知道如何在下拉框的值中进行硬编码（如果我错了，请纠正我），但我希望能够使用数组来填充它。
<script type="text/javascript">
var cuisines = ["Chinese","Indian"];
</script>
<select id="CusineList"></select>
I have hard coded an array for simplicity, the "CuisineList" is my drop down box
为简单起见，我硬编码了一个数组，“CuisineList”是我的下拉框
回答by Hymanwanders
Use a forloop to iterate through your array. For each string, create a new optionelement, assign the string as its innerHTMLand value, and then append it to the selectelement.
使用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);
}
UPDATE: Using createDocumentFragmentand forEach
更新：使用createDocumentFragment和forEach
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 DocumentFragmentacts as a light weight document object that can be used to collect elements. Once all your elements are ready, you can execute a single appendChildoperation so that the DOM only updates once, instead of ntimes.
如果您有一个非常大的元素列表要附加到文档中，单独附加每个新元素可能是无效的。将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);
回答by Alexander Heim
This is a part from a REST-Service I′ve written recently.
这是我最近写的 REST-Service 的一部分。
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)
}
The reason why im posting this is because appendChild() wasn′t working in my case so I decided to put up another possibility that works aswell.
我发布这个的原因是因为 appendChild() 在我的情况下不起作用，所以我决定提出另一种可行的可能性。
