javascript - 选中的选择框中更新选项的性能

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');
});

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.