Question

如果有人帮助我创建优化代码以动态添加9000+选项以供选择框，我将不胜感激。基本上为了简化每个选项，我保持文本和值都作为for循环的索引。

我尝试了很多选项，如：

为所有9000条记录一次创建选项元素字符串，然后使用jquery和plain javascript添加到select元素

2

for loop { 
    options[options.length] = new Option(text, value);
}

然后：

selectElement.options.add(options);

3。

var objOption = document.createElement("option");
objOption.value = value;
objOption.text = text;
htmlElement.options.add(objOption);

这些片段几乎都在同一时间。有没有办法在2-3秒内完成这个？

Answer 1

嗯，你说你试图添加字符串，说实话，9000个选项非常多。我建议使用像chosen-select这样的东西，以增加这种巨大选择的可用性。

无论如何，我试图以一种简单的方式修改选择，它的工作速度非常快。

选中jsFiddle。

它的作用是使用html() jQuery方法将选项添加为字符串。

// number of options to insert
var noptions = 9000;

// number of current options
var nOpts = $('#huge_select option').length;

// current options html
var options = $('#huge_select').html();
for (var i = 0; i < noptions; ++i) {
    // add the html options to the current set
    options += "<option value='"+(i+nOpts)+"'>"+(i+nOpts)+"</option>";
}
// set the select html
$('#huge_select').html(options);

Answer 2

您必须使用自定义选择。

DOM中的9000个项目非常慢，因此您的自定义选择必须具有虚拟化功能（只有可见元素将位于DOM中）

看看这里：Virtual Select

动态添加9000个选项以在JavaScript中选择javascript花费太长时间

2 个答案: