使用JavaScript將選項列表添加到HTML5 select標簽

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

現場示例：

 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>