Question

我想在 html select 中附加多个选项。

目前我在循环中使用以下代码，但由于每次都必须添加新选项，因此工作缓慢。

代码段：

s.options[s.options.length]= new Option(url, '1');

所以我猜，如果我可以一次性添加所有选项而不是像上面那样逐一添加，也许它可以使它更快一点。

请建议一个更快的功能然后这个。感谢

Answer 1

试试这个，

s.options [s.options.length] = function Option（url，'1'）{ //语句到这里 };

Answer 2

您可以使用DocumentFragment执行此操作，但我不确定浏览器支持。它肯定适用于所有浏览器的当前版本（包括IE 10），但我怀疑它在旧IE中有效。

var frag = document.createDocumentFragment();
for (var i = 0; i < 10; ++i) {
    var option = document.createElement("option");
    option.value = "" + i;
    option.text = "Option " + i;
    frag.appendChild(option);
}

s.appendChild(frag);

演示：http://jsfiddle.net/QsNpe/

Answer 3

试试这个：

var tmpOptions = [];
for(var i=0; i<optionsLength; i++) {
    tmpOptions[i] = new Option(url, i);
}
s.options = tmpOptions;

Answer 4

试试这个

var dataArr = [{'value':'val1','text':'text1'},
               {'value':'val2','text':'text2'},
               {'value':'val3','text':'text3'},
               {'value':'val4','text':'text4'},
               {'value':'val5','text':'text5'},
               {'value':'val6','text':'text6'},
               {'value':'val7','text':'text7'}];

// Removes all options for the select box
$('#optExample option').remove();

// .each loops through the array
$.each(dataArr, function(i){
    $('#optExample').append($("<option></option>")
                    .attr("value",dataArr[i]['value'])
                    .text(dataArr[i]['text']));
});

在html select中立即附加多个选项

4 个答案: