在javascript中动态添加9000个选项以进行选择在IE上花费的时间太长

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

我尝试了许多选择，如：

一次为所有9000条记录创建option元素字符串，然后使用jquery和普通javascript添加到select元素 二,

然后：

selectElement.options.add(options);

三,

---

所有这些代码片段占用的时间几乎相同。有没有办法在2-3秒内完成此操作？

您必须使用自定义选择

DOM中的9000个项目非常慢，因此您的自定义选择必须具有虚拟化功能，只有可见元素才会出现在DOM中

---

看看这里：

好吧，您说您已经尝试添加字符串，老实说，9000个选项相当多。我建议使用类似的方法来提高如此庞大的选择的可用性

无论如何，我已经尝试用一种简单的方式修改select，它运行得非常快

看看这个

它所做的是使用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);

---

选择框中有9000个项目？我会推荐另一种解决方案，它包括textbox和一个免费或已验证的文本控件，以选择您或用户想要的内容。从用户体验的角度来看，选择9000个项目是非常可怕的。一个包含9000个项目的选择框或下拉列表实际上是不可用的。也许你可以找到一种方法来拥有一个较小的项目集或使用不同的选择方式。你知道什么花费了大部分时间吗？创建元素还是将它们添加到DOM？创建一个新元素，向该元素添加选项，然后在DOM中替换该元素，怎么样？无论如何，我真的认为自动完成会在这里工作得更好。没有人能真正使用带有9K元素的select。理论上，添加到DOM的速度最慢。因此，您希望使用字符串或文档片段一次性创建所有9k，并且只在一切就绪后附加到DOM。实际上：大多数浏览器都会有很多问题，使用9k选项可以获得相当好的帧速率。请认真研究另一种解决方案，因为通过9k选项进行用户搜索是丢失用户的最佳方式。谢谢大家的快速回复。如果这个问题没有其他解决方案，我会尝试根据需要加载数据。谢谢Steeve，但我不能使用任何其他插件或库。所以你必须自己制作。。。因为不建议在DOM中添加9000个元素。是的，谢谢。html正在以超高速工作！！可能是附加太慢了。但是现在使用html就可以了。

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

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