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

小开

You'll need to loop through your array elements, create a new DOM node for each and append it to your object:

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

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

小开

Something like this should work:

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

You can refer to this article for more details:
http://www.plus2net.com/javascript_tutorial/list-adding.php

小开

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

小开

You'll first get the dropdown element from the DOM, then loop through the array, and add each element as a new option in the dropdown like this:

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




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

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

This assumes that you're not using JQuery, and you only have the basic DOM API to work with.

小开

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

小开

You can also do it with jQuery:

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

小开

I found this also works...

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

小开

I used Alex Turpin's solution with small corrections as mentioned below:

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

Corrections because with the appendChild() function it loads when the DOM prepares. So It's not working in old (8 or lesser) IE versions. So with the corrections it's working fine.

Some notes on the differences between ABC0 and appendChild().

小开

Here is my answer:

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

小开

Simple jQuery solution that is easy to debug:

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

小开

If you're working with React and JSX, you can use the map function. Then you don't need to add DOM nodes manually.

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

You can map this into your <options> tag (within <select>)

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

小开

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

小开

var list =["muez","devomech","solution"]
var option = "";
for(var i=0; i<list.length; i++){
option+= '<option value="'+ list[i] +'">' + list[i] + "</option>"
          

}
document.getElementById("deviceoption").innerHTML = option;

<select id="deviceoption"></select>

`

小开

Using template literals would be:

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

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