JavaScript - 用数组填充下拉列表

IT技术 javascript arrays
2021-01-24 12:34:46

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

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

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

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

使用 Javascript,我将如何用数组值填充下拉菜单的其余部分?这样选项将是 "Choose a number", "1", "2", "3", "4", "5" 。. . . . “否”?

6个回答

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

@AbdallahOkasha可以重现这个错误的一个小例子,在像jsfiddle.net和共享一个链接?
2021-04-07 12:34:46
这是本示例中的 jsfiddle 片段 @alex .text 函数在没有解析为字符串的情况下运行良好,但是在我的代码中它给了我一个错误,我实际上使用了类似的字符串数组(每个都包含空格)。 jsfiddle.net/okasha/h1jt3yz1/2
2021-04-07 12:34:46
我遇到了一个错误textContent & value are not a function,解决方案是像这样opt 转换为 String : el.textContent = String(opt); el.value = String(opt); 这是在opt 不是String 的情况下
2021-04-09 12:34:46
@AbdallahOkasha 这没有意义。如果你试图使用会发生的错误el.textContent是这样的:el.textContent(opt)如果您像在我的示例中一样使用它,number浏览器是否会将其转换为字符串并不重要
2021-04-09 12:34:46
感谢您的关心 .. 实际上,我尝试编写el.textContent = arr[i]orel.value = arr[i]并且我收到一个错误消息:valuetexttextContent are not functions
2021-04-11 12:34:46

你也可以用 jQuery 来做到:

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

我使用了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()

我发现这也有效...

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

您将首先从 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 可以使用。

不,这正是我链接的那个。webkit 中的“意外令牌非法”。
2021-03-22 12:34:46
我实际上是从 Stackovervflow 复制粘贴的,而不是小提琴 - 但也许 stackoverflow 作者从他自己的小提琴复制粘贴,复制粘贴被继承了!:)
2021-03-26 12:34:46
@NielsBrinch - 错误是什么?是“下拉列表未定义”吗?
2021-04-03 12:34:46
@NielsBrinch - 不要直接从 JSFiddle 复制和粘贴。:)
2021-04-04 12:34:46
请注意,当我复制粘贴此代码时遇到了这个问题:stackoverflow.com/questions/4404526/...
2021-04-11 12:34:46