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

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

实例

Answer 2

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

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

Answer 3

这样的事情应该有效:

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 4

您将首先从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 5

我有同样的要求,我使用"Alex Turpin"解决方案,如下所述进行小修正.

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或更小)IE版本.因此,通过更正,它工作正常.

感谢Alex为您的解决方案.

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

Answer 6

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

Answer 7

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

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 8

使用模板文字将是：

const arr = [1,2,3,4]
var options = arr.map(e=>{return `<option value="${e}">${e}</option>`})
document.getElementById("selectNumber").innerHTML = options.join('')
//document.getElementById("selectNumber").insertAdjacentHTML("beforeend", options);

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