gpt4 book ai didi

javascript - 使用 JavaScript 将选项列表添加到 HTML5 选择标签

转载 作者:行者123 更新时间:2023-11-28 18:32:11 25 4
gpt4 key购买 nike

我有下面的 HTML 代码,并且需要通过从服务器返回的大量元素来动态更新“选项”元素

<select id='select'>
<option value = '0' selected></option>
</select>

因此,我编写了以下 JS 代码:

var select = e.querySelector('#select');

for(var k=0; k<5;k++){
var opt = document.createElement('option');
opt.value=data[k].value;
opt.text=data[k].text;
select.add(opt);
}

我不需要使用 JQuery 或任何其他插件。

有没有更简洁和/或更简单的方法来做到这一点?

最佳答案

您可以使用Option构造函数:

var select = e.querySelector('#select');
for(var k=0; k<5;k++){
select.options.add(new Option(data[k].text, data[k].value));
}

实例:

var data = [
{text: "Option 1", value: "1"},
{text: "Option 2", value: "2"},
{text: "Option 3", value: "3"},
{text: "Option 4", value: "4"},
{text: "Option 5", value: "5"}
];
var select = document.querySelector('#select');
for(var k=0; k<5;k++){
select.options.add(new Option(data[k].text, data[k].value));
}
<select id="select" size="10"></select>

假设data是一个数组,您还可以使用Array#forEach:

var select = e.querySelector('#select');
data.forEach(function(entry) {
select.options.add(new Option(entry.text, entry.value));
});

实例:

var data = [
{text: "Option 1", value: "1"},
{text: "Option 2", value: "2"},
{text: "Option 3", value: "3"},
{text: "Option 4", value: "4"},
{text: "Option 5", value: "5"}
];
var select = document.querySelector('#select');
data.forEach(function(entry) {
select.options.add(new Option(entry.text, entry.value));
});
<select id="select" size="10"></select>

关于javascript - 使用 JavaScript 将选项列表添加到 HTML5 选择标签,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37783539/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com