0

我需要在一个页面上填充八个 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个不同的循环，问题就很明显了。有没有其他方法可以更快地将大量项目添加到下拉列表中？用于显示大量项目的下拉控件是否有更快的替代方法？感谢您的任何想法。

〜蒂姆

4

3 回答 3

1

我会尝试以下方法：

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/

于 2013-10-10T22:07:41.690 回答
0

回答之前的几件事。

首先，我认为最好的方法不是服务器端实现。如果您可以在客户端上执行某些操作，则应该执行此操作并且不要触摸您的服务器（如果它与安全性无关）。

第二件事 - 为什么您需要选择列表中的 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毫秒。

于 2013-10-10T22:44:15.023 回答
0 
for (var i = 0; i<n; i++){
   select.append('<option value='+i+'>'+i+'</option>');
}

请注意，这在 IE 中不起作用。看到这个链接 -

使用 innerHTML 更新 SELECT – IE 和 FF 的区别

于 2018-06-11T14:45:55.520 回答