JavaScript – 使用数组填充下拉列表

我有一个脚本中声明的数组:

var myArray = new Array("1", "2", "3", "4", "5" . . . . . "N"); 

我有一个包含下拉菜单的表单:

 <form id="myForm"> <select id="selectNumber"> <option>Choose a number</option> </select> </form> 

使用Javascript,我将如何填充数组值的下拉菜单的其余部分? 所以选项将是“select一个数字”,“1”,“2”,“3”,“4”,“5”。 。 。 。 。 “N”?

你需要遍历你的数组元素,为每个元素创build一个新的DOM节点,并将其附加到你的对象。

 var select = document.getElementById("selectNumber"); var options = ["1", "2", "3", "4", "5"]; for(var i = 0; i < options.length; i++) { var opt = options[i]; var el = document.createElement("option"); el.textContent = opt; el.value = opt; select.appendChild(el); }​ 

现场示例

你也可以用jQuery来做到这一点:

 var options = ["1", "2", "3", "4", "5"]; $('#select').empty(); $.each(options, function(i, p) { $('#select').append($('<option></option>').val(p).html(p)); }); 

像这样的东西应该工作:

 var dropdown = document.getElementById("dropdown1"); if (dropdown) { for (var i=0; i < month.length;++i){ addOption(dropdown, month[i], month[i]); } } addOption = function(selectbox, text, value) { var optn = document.createElement("OPTION"); optn.text = text; optn.value = value; selectbox.options.add(optn); } 

你可以参考这篇文章的更多细节:
http://www.plus2net.com/javascript_tutorial/list-adding.php

您将首先从DOM中获取下拉元素,然后循环访问数组,然后将每个元素添加为下拉菜单中的新选项,如下所示:

 // Get dropdown element from DOM var dropdown = document.getElementById("selectNumber"); // Loop through the array for (var i = 0; i < myArray.length; ++i) { // Append the element to the end of Array list dropdown[dropdown.length] = new Option(myArray[i], myArray[i]); }​ 

查看JSFiddle进行实时演示: http : //jsfiddle.net/nExgJ/

这假定你没有使用JQuery,并且只有基本的DOM API可以使用。

我发现这也适用…

 var select = document.getElementById("selectNumber"); var options = ["1", "2", "3", "4", "5"]; // Optional: Clear all existing options first: select.innerHTML = ""; // Populate list with options: for(var i = 0; i < options.length; i++) { var opt = options[i]; select.innerHTML += "<option value=\"" + opt + "\">" + opt + "</option>"; } 
 ["1","2","3","4"].forEach( function(item) { var o = document.createElement("option"); o.textContext = item; document.getElementById("myselect").appendChild(o); }); 
 <form id="myForm"> <select id="selectNumber"> <option>Choose a number</option> <script> var myArray = new Array("1", "2", "3", "4", "5" . . . . . "N"); for(i=0; i<myArray.length; i++) { document.write('<option value="' + myArray[i] +'">' + myArray[i] + '</option>'); } </script> </select> </form> 

我有相同的要求,我用下面提到的小纠正“Alex Turpin”解决scheme。

 var select = document.getElementById("selectNumber"); var options = ["1", "2", "3", "4", "5"]; for(var i = 0; i < options.length; i++) { var opt = options[i]; var el = document.createElement("option"); 
  el.text = opt; el.value = opt; select.add(el); 
 }​ 

更正是因为使用appendChild()函数在DOM准备时加载。 所以它不适用于旧的(8个或更less的)IE版本。 所以改正它工作正常。

感谢亚历克斯的解决scheme。

一些关于差异的注释b / w add()和appendChild()