jquery - jQuery用大量数据填充选项标签会使浏览器崩溃

Question

当我使用以下代码

var html = "";
$.map(data.modelTypes, function (item) {
    html+= "<option>" + item.type + "</option>";
});
$("#drowdown").html(html);

我的javascript必须添加到$(“＃dropdown”)元素中的HTML太多，这会使任何浏览器崩溃几秒钟，最后它可以正常工作并填充了下拉列表，但无论如何都存在使我的浏览器不崩溃？

Answer 1

不要连接必须解析的巨大字符串，创建实际元素并放入select中:

var options = $.map(data.modelTypes, function (item) {
  return $('<option>', { text: item.type })[0];
});
$("#drowdown").empty().append(options);

注意:您将 map方法用作 each，应该在函数中返回值，然后获得从 map方法返回的值的数组。
编辑:
一些测试表明，使用更简单的Javascript而不是使用jQuery循环和创建元素使它的速度提高了一倍:

var options = [];
for (var i =0; i < data.modelTypes.length; i++) {
  var o = document.createElement('OPTION');
  o.text = data.modelTypes[i].type;
  options.push(o);
}
$("#drowdown").empty().append(options);

在我使用Firefox的计算机上，这在大约一秒钟内添加了1000000个选项元素。
无论如何，如果您有太多选择，您可能应该重新考虑UI ...