change jquery chosen max_selected option dynamically

Question

I've two select option, class and class_attr.

• class has 2 options: A and B
• class_attr has many options: aa, bb, cc, dd, ee, ...

How do I implement if the user chooses A, the chosen max_selected is only 5 options, and if the user changes to B, the chosen max_selected is only 3 options.

I'm trying to do something like this:

$(".class").change(function(){
    var code = $(this).val();
    if(code == 1){
        $(".class_attr").chosen({max_selected_options: 5});
    }
    else{
        $(".class_attr").chosen({max_selected_options: 3});         
    }
    $(".class_attr").trigger("liszt:updated");
});

But this seems to not work, the option list for class_attr will be set only once (the first class max_selected_options value selected, whether 5 or 3) and will never updated the max_selected_options after the first time.

Answer 1

Try this:

$('.class').chosen().change(function () {

    var code = $(this).val();
    var maxOptions = code == 1 ? 5 : 3;

    $(".class_attr").chosen('destroy').chosen({ max_selected_options: maxOptions });
});

It looks like you can't change any options after it's been initalised so it has to be destroyed before being created once more.

[EDIT] You can access Chosen instance through $(".class_attr").data('chosen').
Then you can update options directly on the instance :

$('.class_attr').data('chosen').max_selected_options = 2;
$('.class_attr').trigger("chosen:updated");

Answer 2

In one my project I was need set maximun value not to all chosen drop-downs, so I used next initialization for them:

jQuery.each(jQuery(".chosen-select"), function (index, select) {
    var max_options = 0;//zero mean unlimited

    if (jQuery(select).data('max-options') !== 'undefined') {
        max_options = jQuery(select).data('max-options');
    }

    jQuery(select).chosen({
        search_contains: true,
        no_results_text: lang.no_results,
        placeholder_text_single: lang.select_one,
        placeholder_text_multiple: lang.select_some,
        disable_search: disable_search,
        max_selected_options: max_options
    });
});

On the drop-down which maximum selected options should be limited I set attribute data-max-options

Example:

<select class="chosen-select" data-max-options="5" name="lands[]" multiple="" data-placeholder=''>
                        //options in cycle here
</select>