Question

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

〜添

Answer 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/

Answer 2

答案前几乎没有。

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

第二件事 - 为什么在选择列表中你需要8000个元素？想想你的应用程序的用户，谁想滚动浏览8000个元素只是为了选择他的元素？正如前面提到的那样 - 自动完成听起来更合适。

现在就是答案：

您的原始方法为here： 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);

下一个小提琴是here。更少的线条和一些时间的改善。现在 1312 毫秒。但它在每个循环中附加了新元素。

下一个fiddle摆脱了这个。

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 毫秒。

Answer 3

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

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

Using innerHTML to Update a SELECT – Differences between IE and FF

如何将大量项添加到HTML selectObject

3 个答案: