Performance of updating options in chosen select box

Question

I use jQuery Chosen plugin for select boxes and Bootstrap 2.3.2. I have two select boxes with same options, where values are strings. If I select option in first select box, this option is disabled in second select box and vice versa. If I deselect option in first select box, this option is enabled in second select box and vice versa.

Basically, i have two selected boxes, which have the same options but you can select the same options only in one select box.

I use reset button for first select box, which update the select boxes to initial state. It means for all options in first select box selected attribute is false and for all options in second select box disabled attribute is false.

The problem is performance. When i click the reset button, updating of option attributes and chosen select box is too long. I want to use reset button for select boxes with more than one thousand options, but i don't know if i should change my code or use another select box plugin.

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

Your code is currently triggering the "chosen:updated" event for each option element. You only need to do it for the <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.