Question

所以我试图使用jquery来填充这样的select标签，我选择的范围实际上是从数据库中提取的，但这简化了你的事情：

 var select_tag = $("select");
 for(var i = 0; i < 10000; i++)
 {
      $("<option value='" + i + "'>" + i + "</option>").appendTo(select_tag);
 }

当我这样做时，代码需要花费很长时间才能运行并填充select标签。这么多，以至于用户可能会开始认为他们的浏览器关闭并开始随处点击。无论如何我可以加快/优化它的过程，以便它不需要这么长时间吗？

请注意，select标签本身会根据点击事件添加到页面中，并且不会立即加载网页。在此示例中，用户在一个页面上，然后用户单击“下一步”按钮，这将触发各种功能，其中一个功能将select元素添加并填充到DOM。我只需要一种方法来加速或优化流程。

Answer 1

这是一个解决方案。

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

Answer 2

不幸的是，我不认为你可以进行很多“宏观”优化不过，您可以进行一些较小的优化。

避免解析HTML - 使用document.createElement('option')创建元素请参阅Advantages of createElement over innerHTML?
使用DocumentFragment一次批量插入所有选项请参阅http://jsperf.com/document-fragment-vs-innerhtml-vs-looped-appendchild

以下是一些示例代码：

var select_tag = $("select");
var docFrag = document.createDocumentFragment();
for(var i = 0; i < 10000; i++)
{
  docFrag.appendChild(createOption(i, i));
}
select_tag.append(docFrag);

function createOption(text, value) {
    // Avoid parsing HTML using jQuery; use native methods instead:
    var option = document.createElement('option');
    option.textContent = text;
    option.setAttribute('value', value);
    return option;
}

Answer 3

您可以从文档中删除元素并添加所有元素，然后将其重新插入文档中。

var select_tag = $("select").detach();

 for(var i = 0; i < 10000; i++)
 {
      $("<option value='" + i + "'>" + i + "</option>").appendTo(select_tag);
 }

$('#orignal-location').append(select_tag);

Answer 4

有了大量数据，总会有延迟。所以我建议你使用另一种方法，比如服务器过滤服务和客户端控件，如select2或chosen jquery插件来处理用户输入

看看这两个他们有远程数据加载功能。

我希望这可以提供帮助。

如何在没有延迟的情况下使用多个选项填充SELECT标记？

4 个答案: