【问题标题】：An efficient way to repopulate a select box?重新填充选择框的有效方法？
【发布时间】：2014-06-24 15:28:47
【问题描述】：

我有一个很好的'n'old 双选框，我想知道删除所有选项并包含新选项的最有效方法是什么。这是我目前的方法（也欢迎无 jQuery 的建议）：

var citiesSelect = $('#cities'),
    cities = ['A bunch', 'Of', 'Cities'], //would come from an external array of AJAX
    option;

citiesSelect.find('option').each(function() {
    $(this).remove();
});

cities.unshift('---'); //including a blank option
for (i in cities) {
    option = document.createElement('option');
    option.value = i;
    option.innerText = cities[i];
    citiesSelect.append(option);
}

编辑：结果

This is the JSPerf that resulted from this question（被埋在答案的 cmets 中）。

【问题讨论】：

api.jquery.com/empty, api.jquery.com/jquery.map
另外，对 JavaScript 数组使用 for ... in 循环也不是一个好主意。
你的整个循环体可以简洁地编码为：citiesSelect.append(new Option(cities[i], i));并且您的中间块可以替换为 citySelect[0].options.length=0;

标签： javascript jquery html performance

【解决方案1】：

一次添加大量 dom 元素的最有效方法之一是使用文档片段。 MDN

var citiesSelect = $('#cities'),
    cities = ['A bunch', 'Of', 'Cities'], //would come from an external array of AJAX
    option,
    frag = document.createDocumentFragment();

citiesSelect.empty();

cities.unshift('---'); //including a blank option
for (var i = 0;i < cities.length; i++){
    option = document.createElement('option');
    option.value = i;
    option.innerText = cities[i];
    frag.appendChild(option);
}

citiesSelect.append(frag);

我还给@Jack的jsperf https://stackoverflow.com/users/680420/jack添加了一个测试用例

这是Fiddle

【讨论】：

很好的补充。片段似乎是最快的。
这个听起来和我要找的完全一样。我虽然可能有一种方法可以同时添加“一堆”，但不确定如何:) 同时，我添加了更多测试用例并将这个想法与@dandavis 的想法混合在一起：jsperf.com/for-vs-for-in-stack/3

【解决方案2】：

使用以下内容可以提高效率。这是一个你可以摆弄的小提琴 http://jsfiddle.net/NqRrB/。我还创建了一个 jsperf，您也可以添加测试：http://jsperf.com/for-vs-for-in-stack。

var citiesSelect = $('#cities'),
    cities = ['A bunch', 'Of', 'Cities'], //would come from an external array of AJAX
    option;

citiesSelect.empty();

cities.unshift('---'); //including a blank option
for (var i = 0;i < cities.length; i++){
    option = document.createElement('option');
    option.value = i;
    option.innerText = cities[i];
    citiesSelect.append(option);
}

【讨论】：

+1 用于启动 JSPerf 和 for..in vs for idea :)

【解决方案3】：

这有点短，执行起来可能更快：

var citiesSelect = $('#cities'),
    cities = ['A bunch', 'Of', 'Cities']; // would come from an external array of AJAX

citiesSelect[0].options.length=0; // clear existing options
cities.unshift('---'); // including a blank option


// populate with new options:
$(cities).each(function(i,v){
  citiesSelect.append(new Option(v, i));
});

使用本机 dom 有时比使用 jQuery 更简单、更快。 options 集合和 Option() 构造函数尤其适合管理选择。

【讨论】：