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（）
