使用JavaScript

Question

我有以下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或任何其他插件。

是否有更简洁和/或更简单的方法来做同样的事情？

Answer 1

您可以使用Option构造函数：

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

实例：

＆＃13;

＆＃13;

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

＆＃13;

<select id="select" size="10"></select>

＆＃13;

＆＃13;

＆＃13;

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

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

实例：

＆＃13;

＆＃13;

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

＆＃13;

<select id="select" size="10"></select>

＆＃13;

＆＃13;

＆＃13;