在所選選擇框中更新選項的性能

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

您的代碼當前正在為每個選項元素觸發“selected：updated”事件。 您只需要為<select> ：

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

這是更新的jsfiddle。