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，我將如何使用數組值填充下拉菜單的 rest？ 這樣選項將是“選擇一個數字”、“1”、“2”、“3”、“4”、“5”......“N”？

Answer 1

您需要遍歷您的數組元素，為每個元素創建一個新的 DOM 節點，並將 append 它添加到您的 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>

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

我使用了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() function 它在 DOM 准備時加載。 所以它不適用於舊的（8 或更小）IE 版本。 因此，通過更正，它工作正常。

關於add()和appendChild()之間差異的一些說明。

Answer 4

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

Answer 5

您將首先從 DOM 中獲取下拉元素，然后遍歷數組，並將每個元素作為新選項添加​​到下拉列表中，如下所示：

 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>

這假設您沒有使用 JQuery，並且您只有基本的 DOM API 可以使用。

Answer 6

像這樣的東西應該工作：

 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 7

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

Answer 8

這是我的答案：

 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 9

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

Answer 10

如果您正在使用 React 和 JSX，則可以使用 map function。 然后就不需要手動添加 DOM 節點了。

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

您可以將 map 放入您的<options>標簽（在<select>內）

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

Answer 11

 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>

`

Answer 12

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

易於調試的簡單 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 14

使用模板文字將是：

 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>