Question

我在脚本中声明了一个数组：

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

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

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

使用Javascript，如何使用数组值填充下拉菜单的其余部分？这样选项将是“选择一个数字”，“1”，“2”，“3”，“4”，“5”。。。。。 “N”？

Answer 1

您需要遍历数组元素，为每个元素创建一个新的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);
}

Live example

Answer 2

这样的事情应该有效：

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

Answer 3

首先从DOM获取dropdown元素，然后遍历数组，并在下拉列表中添加每个元素作为新选项，如下所示：

// 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。

Answer 4

我发现这也有效......

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

Answer 5

我有同样的要求，我用了＃34; Alex Turpin＆＃34;如下所述的小修正解决方案。

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

更正，因为在DOM准备时加载了appendChild（）函数。所以它不适用于旧的（8个或更小的）IE版本。因此，通过更正，它可以正常工作。

感谢Alex提供的解决方案。

关于differences b/w add() and appendChild()

的一些注释

Answer 6

["1","2","3","4"].forEach( function(item) { 
   var o = document.createElement("option");
   o.textContext = item;
   document.getElementById("myselect").appendChild(o);
});

Answer 7

这是我的答案：

var options = ["1", "2", "3", "4", "5"];
for(m = 0 ; m <= options.length-1; m++){
   var opt= document.createElement("OPTION");
   opt.text = options[m];
   opt.value = (m+1);
   if(options[m] == "5"){
    opt.selected = true;}
document.getElementById("selectNum").options.add(opt);}

Answer 8

如果你使用 React 和 JSX，你可以使用 map 函数。那么就不需要手动添加DOM节点了。

const numsarray = [1, 2, 3, 4, 5];

您可以将其映射到您的 <options> 标签（在 <select> 内）

<select>
  {numsarray.map((num) => (
    <option>{numsarray}</option>
  ))}
</select>

Answer 9

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

Answer 10

易于调试的简单 jQuery 解决方案：

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

<script>
  var myArray = ["1", "2", "3", "4", "5"];
  for (let i = 0; i < myArray.length; i++) {
    $("#selectNumber").append("<option value='" + myArray[i] + "'>" + myArray[i] + "</option>");
  }
</script>

Answer 11

var test = document.getElementById("TestOption");
var arr = ["A","B","C","D"];  
//remove options if necessary
for(var i=test.options.length- 1;i>= 0;i--) {test.remove(i);}        
//add new options
for(i in arr) {test.add(new Option(arr[i],i));}

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

11 个答案: