使用一个javascript数组来填充一个下拉列表框 [英] use a javascript array to fill up a drop down select box

问题描述

我有一个文本文件，我正在读取并将数据存储在一个JavaScript数组中，它是一个美食列表。我想使用数组来填充一个下拉列表框。我知道如何在下拉框中的值的硬编码（如果我错了，使用正确的我），但是我想要使用数组来填补它。

 < script type =text / javascript> 
 var cuisines = [Chinese，Indian]; 
< / script> 
 
< select id =CusineList>< / select> 
  

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

解决方案

使用循环来遍历数组。对于每个字符串，创建一个新的选项元素，将字符串指定为其 innerHTML 和值，然后将其附加到选择元素。

  var cuisines = [Chinese，Indian]; 
 var sel = document.getElementById（'CuisineList'）; （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（功能（美食，索引）{
 var opt = document.createElement（'option'）; 
 opt.innerHTML = cuisine; 
 opt .value = cuisine; 
 fragment.appendChild（opt）; 
}）; 
 
 sel.appendChild（fragment）; 
  

演示

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>

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

解决方案

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

DEMO

UPDATE: Using createDocumentFragment and 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 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);

DEMO

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