删除下拉选项性能问题

Question

我需要知道从下拉列表中删除数百个选项的最快方法。

目前，Firefox在更新我的第二个下拉动态列表时非常缓慢。 Chrome在脚本上运行正常，但我需要加快删除：

<select id="myDropDown" name="myDropDown">
<option value=1>1</option>
<option value=2>2</option>
<option value=3>3</option>
<option value=4>4</option>
<option value=5>5</option>
... all the way to let's say 500
</select>

重新填充它是一件轻而易举的事。我有一个json解析器，可以创建     <option></option> 字段。

我试过了：

.remove()
.children().remove()   
.empty()

他们在删除数百个选项时都表现出相同的迟缓表现。有什么我想念的吗？

Answer 1

你试过循环吗？

$('#myDropDown option').each(function(i, option){ $(option).remove(); });

您可以通过跟踪i的值来指定哪些。

Answer 2

有趣的问题。我认为，如果你想要它真的很快，你可以只显示/隐藏选项

$("#someOption").hide();

修改 我想你可能有一系列值必须填充，让我们说values。如果你首先遍历你的选项并检查每个选项是否在values数组中（反之亦然，会很慢），它会很快。所以：

var values = [...]; //Array with values that must 'exist' in the dropdown
$("#select1 option").each(function(i, option){
   option.style.display = ($.inArray(option.value, values) >= 0 ? 'block' : 'none');
});

请注意，我们在循环中避免使用jquery选择器来提高性能。我们不是首先遍历数组（和内部选项），因为在数组中搜索比在dom中搜索具有特定属性（在本例中为值）的元素（在本例中为选项）要快得多。

希望这会有所帮助。干杯

Answer 3

问题可能是jQuery在删除东西时尝试清理，请阅读.empty()以获取详细信息（从“避免内存泄漏......”开始）。

如果您认为这在您的情况下不是问题，那么

$("#someOption").text("");

可能是你需要的大锤。

Answer 4

$("#myDropDown").find("option").remove();