使用 JavaScript 添加选项列表到 HTML5 select 标签
Adding list of options to HTML5 select tag using JavaScript
我有下面的 HTML 代码,需要通过从服务器返回的大量元素动态更新 "option" 元素
<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 或任何其他插件。
有没有更简洁and/or更简单的方法来做同样的事情?
您可以使用 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>
我有下面的 HTML 代码,需要通过从服务器返回的大量元素动态更新 "option" 元素
<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 或任何其他插件。
有没有更简洁and/or更简单的方法来做同样的事情?
您可以使用 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>