Question

我正在使用javascript复制几个选择列表并将它们附加到DOM中的另一个元素。其中一个列表非常大：29843个选项。我已经阅读了许多关于改进jQuery的append方法性能的技巧，包括只添加一次并使用数组而不是连接。我认为下面的代码并没有违反任何这些做法，但是当我调用append方法时，浏览器（甚至是Chrome）就会挂起。

var rows = $('.runRow');
var envOpts = rows[0].children[1].children[0].innerHTML;  // contains 3 <option> tags
var sumOpts = rows[0].children[2].children[0].innerHTML;  // contains 29843 <option> tags

var newRow = "<span class=\"runRow\">";
newRow += "<span>Run " + (numRuns++) + "</span>";

newRow += "<span><select id=\"Environment" + numRuns + "\" name=\"Environment" + numRuns + "\">";
newRow += envOpts;
newRow += "</select></span>";

newRow += "<span><select id=\"SummaryID" + numRuns + "\" name=\"SummaryID" + numRuns + "\">";
newRow += sumOpts;
newRow += "</select></span>";

newRow += "</span>";

$('#RunsTable').append(newRow);

我是否过多地询问了javascript，还是有办法执行此操作？

谢谢！

Answer 1

你问的太多了。但不一定是jQuery，甚至是JavaScript。正如James Montagne的评论所暗示的那样，你（ab）使用下拉菜单的概念可能会超出操作系统/窗口框架的良好运行范围。

您是否考虑过分层方法，将30k选项分类，然后将其作为下拉列表呈现给用户？

Answer 2

好的，这是一种比你目前尝试的更快的方法，但仍然很慢。这实际上使用javascript创建和显示30k选项，所以我们真的在这里工作系统。在我两岁的笔记本电脑上渲染需要大约60秒。您首先使用array.push和join，它们比+= string提供了显着的性能提升。

http://jsfiddle.net/yuTtK/1/ - 链接默认为300，以免淹没某人的浏览器。

//create an option list with 30k options
var options = [];
for (var i = 0; i< 30000; i++) {
    options.push('<option>'+i+'</option>');
}
$('select').append(options.join(''));

//copy each select list item onto the page
var myArray = [];
var list = $('option');
for (var j=0; j < list.length; j++) {
    myArray.push('<span>'+list[j].innerHTML+'</span><br/>');
}
$('body').append(myArray.join(''));

为了使用户更加友好，您可以使用超时和加载消息，以便浏览器在列表上进行迭代时具有响应性。

Answer 3

我建议你将选项分成几组，如果可能的话，让他们依赖其他选项。但为什么你需要28000（！）选项???

Answer 4

我同意Paul和Dan的观点。我特别喜欢为大型列表实现的另一个选项是自动完成。根据击键进行ajax调用以获得前十个左右的选择比尝试提取30K更有效。

使用jQuery追加大量的选择选项

4 个答案: