选定下拉框更新选项的性能表现

Question

我使用 jQuery Chosen 插件来处理下拉框，同时使用 Bootstrap 2.3.2。我有两个下拉框，它们的选项相同，选项的值是字符串类型。如果我在第一个下拉框中选择了某个选项，则该选项将在第二个下拉框中被禁用，反之亦然。如果我取消第一个下拉框中的某个选项，则该选项将在第二个下拉框中启用，反之亦然。

基本上，我有两个选定框，它们具有相同的选项，但只能在一个选定框中选择相同的选项。

我使用重置按钮来重置第一个下拉框，这会将选择框更新为初始状态。这意味着对于第一个下拉框中的所有选项，其 selected 属性均为 false，而对于第二个下拉框中的所有选项，其 disabled 属性均为 false。

问题在于性能。当我单击重置按钮时，更新选项属性和已选择的下拉框需要太长时间。我想在具有一千多个选项的下拉框中使用重置按钮，但我不知道是否应更改我的代码或使用另一个下拉框插件。 jsfiddle

$(".keywordContain").click(function(){
    $('select[name=keywordContainSelect] option').prop('selected', false).trigger('chosen:updated');
    $('select[name=keywordNotContainSelect] option').prop('disabled', false).trigger('chosen:updated');
});

- Matt

---

你可以在http://jsperf.com上测试JavaScript的性能，它非常好用和有用。 - Luizgrs

@Luizgrs 首先需要分离导致减速的代码。 - Pointy

Answer 1

你的代码目前会针对每个选项元素触发“chosen:updated”事件。但你只需要对 <select> 元素触发该事件：

$(".keywordContain").click(function () {
    $('select[name=keywordContainSelect] option').prop('selected', false);
    $('select[name=keywordNotContainSelect] option').prop('disabled', false);
    $(".selectKeyword").trigger("chosen:updated");
});

Here is the updated jsfiddle.

- Pointy

---

你说得对，谢谢。我没有意识到那个错误。 - Matt