如何将大量项目添加到 HTML 选择对象

How to add a large number of items to an HTML selectObject

本文关键字：HTML 选择 对象 添加 项目      更新时间：2023-09-26

>我需要在一个页面上填充八个 selectObject 下拉对象，每个对象有数千 (8192( 个项目。我目前正在用Javascript做这件事，这是我所知道的唯一方法：

var iCount;
var option1;
var selectObject1 = document.getElementById('ifbchan');
for(iCount = 0; iCount < 8192; iCount++)
    {
    option1=document.createElement("option");
    option1.text = "Out " + iCount;
    option1.value=iCount;
    try
        {
        selectObject1.add(option1, selectObject1.options[null]);
        }
    catch (e)
        {
        selectObject1.add(option1, null);
        }
    }
selectObject1.selectedIndex =  0;

此方法工作正常，但速度非常慢！这些 8K 循环中的每一个都需要大约 10 秒才能完成。乘以 8 个不同的循环，问题很明显。有没有其他方法可以将大量项目添加到下拉列表中，速度会更快？用于显示大量项目列表的下拉控件是否有更快的替代方法？感谢您的任何想法。

~提姆

我会尝试以下方法：

var elements = ""
var i;
for(i= 0; i < 8192; i++){
    elements += "<option value='"+ i + "'>Out " + i + "</option>";
}

document.getElementById("ifbchan").innerHTML = elements;

这样，每个循环只在 DOM 上执行一个操作，而不是 8000+。

哦，这是我之前准备的：http://jsfiddle.net/3Ub4x/

在答案之前有几件事。

首先，我不认为最好的方法是服务器端实现。如果你可以在客户端上做一些事情，你应该这样做，而不是触摸你的服务器(如果它与安全无关(。

第二件事 - 为什么选择列表中需要 8000 个元素？作为应用的用户，谁愿意滚动浏览 8000 个元素只是为了选择他的元素？如前所述 - 自动完成听起来更合适。

现在是一个答案：

您的原始方法在这里：完成 10000 个元素大约需要 1724 毫秒(您可以通过运行脚本和检查器来查看这一点(。

var start = new Date();
var n = 10000;
var iCount;
var option1;
var selectObject1 = document.getElementById('ifbchan');
for(iCount = 0; iCount < n; iCount++)
    {
    option1=document.createElement("option");
    option1.text = "Out " + iCount;
    option1.value=iCount;
    try
        {
        selectObject1.add(option1, selectObject1.options[null]);
        }
    catch (e)
        {
        selectObject1.add(option1, null);
        }
    }
selectObject1.selectedIndex =  0;
var time = new Date() - start;
console.log(time);

我不喜欢很多这样的代码(它太多行(，所以我会用jquery重写它。

var start = new Date();
var n = 10000;
for (var i = 0; i<n; i++){
    $("#ifbchan").append("<option value="+i+">"+i+"</option>")
}
var time = new Date() - start;
console.log(time);

下一个小提琴在这里。线路少得多，时间有所改善。现在是 1312 毫秒。但它在每个循环中附加新元素。

下一个小提琴摆脱了这个。

var start = new Date();
var n = 10000;
var html = '';
for (var i = 0; i<n; i++){
    html += "<option value="+i+">"+i+"</option>";
}
$("#ifbchan").append(html);
var time = new Date() - start;
console.log(time);

哇，现在只有 140 毫秒。

for (var i = 0; i<n; i++){
   select.append('<option value='+i+'>'+i+'</option>');
}

请注意，这在IE中不起作用。请参阅此链接 -

使用 innerHTML 更新 SELECT – IE 和 FF 之间的差异

相关文章：