我有一个文本文件，我正在读取它并将数据存储在一个 javascript 数组中，它是一个美食列表。我想使用数组来填充下拉选择框。我知道如何在下拉框的值中进行硬编码（如果我错了，请纠正我），但我希望能够使用数组来填充它。
<script type="text/javascript">
var cuisines = ["Chinese","Indian"];
</script>
<select id="CusineList"></select>
为简单起见，我硬编码了一个数组，“CuisineList”是我的下拉框
使用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);
这是我最近编写的 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)
}
我发布这个的原因是因为 appendChild() 在我的情况下不起作用，所以我决定提出另一种可行的可能性。