javascript – 在所选选择框中更新选项的性能

我使用jQuery Chosen插件选择框和Bootstrap 2.3.2.我有两个具有相同选项的选择框,其中值是字符串.如果我在第一个选择框中选择选项,则在第二个选择框中禁用此选项,反之亦然.如果我取消选择第一个选择框中的选项,则在第二个选择框中启用此选项,反之亦然.

基本上,我有两个选中的框,它们具有相同的选项,但您只能在一个选择框中选择相同的选项.

我使用重置按钮作为第一个选择框,将选择框更新为初始状态.它表示对于第一个选择框中的所有选项,所选属性为false,对于第二个选择框中的所有选项,禁用属性为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');
});

解决方法:

您的代码当前正在为每个选项元素触发“selected：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.