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

- user1296265

---

请发布您的尝试和任何错误消息，并使其更通俗易懂，但不要改变原始含义。谢谢。 - mechanical_meat

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

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

- Alex Turpin

---

我遇到了一个错误 textContent 和 value 不是函数 ，解决方法是将 opt 转换为字符串（String）类型，代码如下：`el.textContent = String(opt);el.value = String(opt);`这适用于 opt 不是字符串类型的情况。 - Abdallah Okasha

@AbdallahOkasha 这没有意义。如果您尝试像这样使用 el.textContent(opt)，则会出现该错误。如果您像我的示例中那样使用它，则无论它是一个 number，浏览器都会将其转换为字符串。 - Alex Turpin

谢谢关心...实际上，我尝试编写el.textContent = arr[i]或el.value = arr[i]，但是我收到了一个错误，说：**_value_，_text_和_textContent_不是函数**。 - Abdallah Okasha

@AbdallahOkasha，你能否在类似http://jsfiddle.net/的网站上重现这个错误，并分享链接？ - Alex Turpin

这是一个jsfiddle代码示例，@alex在此例中 .text 函数工作正常，无需解析为字符串，但在我的代码中会出现错误。实际上，我正在使用类似的字符串数组（每个都包含空格）。https://jsfiddle.net/okasha/h1jt3yz1/2/ - Abdallah Okasha

@AbdallahOkasha 在这些示例中使用的是 text 而不是 textContent。而且两个示例似乎都能正常工作，没有出现错误。 - Alex Turpin

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

- Jaco B

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()函数时，它在DOM准备完成时加载。因此，在旧的(8或更早版本)IE中无法正常工作。因此，通过更正后，它可以很好地运行。

有关 add()和appendChild()之间差异的一些说明。

- 0190198

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

- Tim D

Answer 5

你需要先从DOM中获取下拉列表元素，然后通过循环遍历数组将每个元素作为新选项添加到下拉列表中，代码如下所示： ```js // 获取下拉列表元素 const dropdown = document.getElementById("myDropdown"); // 遍历数组并将每个元素作为新选项添加到下拉列表中 array.forEach((element) => { const option = document.createElement("option"); option.text = element; dropdown.add(option); }); ```

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。

- DashK

---

注意，当我复制粘贴这段代码时，我遇到了这个问题：https://dev59.com/K2855IYBdhLWcg3wVist - Niels Brinch

@NielsBrinch - 不要直接从JSFiddle复制粘贴。 :) - DashK

我实际上是从Stackoverflow复制粘贴的，而不是从fiddle - 但也许stackoverflow的作者从他自己的fiddle中复制粘贴，然后复制粘贴被带了过来！ :) - Niels Brinch

@NielsBrinch - 出了什么错误？是“dropdown未定义”吗？ - DashK

不，它就是我链接的那个。在webkit中出现了“Unexpected token ILLEGAL”。 - Niels Brinch

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

- James Johnson

Answer 7

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

- Peter Aron Zentai

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>

- jleviaguirre

---

美观、紧凑且简单易懂的解决方案。 - jgarcias

甚至可以使用document.getElementById("selectNumber = arr.map(val => \<option value="${val}">${val}</option>`); - 我会将变量e`保留给事件。 - mplungjan

更好！ - jleviaguirre

这将导致所有选项元素之间有逗号，因为它会隐式地将数组转换为字符串。对最终用户来说看不到这些逗号，但是我仍然建议在这个回答中将= options替换为= options.join('')。 - hostingutilities.com

@mplungian：最后一句的另一个选择是将数组插入到select中，像这样： document.getElementById("selectNumber").insertAdjacentHTML("beforeend", options); - jleviaguirre

Answer 9

这是我的回答：

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

- Abdelghafour Lahrache

---

这是一份纯代码回答。请添加一些说明，解释你的代码在做什么。 - Kurt Van den Branden

Answer 10

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

- InformediaDev

---

谢谢，我正在寻找一种在追加元素之前删除元素的方法。 - OJVM