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.

score 6 · Accepted Answer · edited Jun 19 '19 at 05:18

6

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");

edited Jun 19 '19 at 05:18

Vikash Pathak

3,444
1
18
32

answered Aug 13 '13 at 18:03

Gruff Bunny

27,738
10
72
59

Sorry2 I just got wrong type, I mean I trigger("liszt:updated"); on $(".class_attr") instead of $("#item_opt") but it still doesn't work – paugoo Aug 13 '13 at 21:34
Thank you very much for the reply. I've tried to implement your method, but it still can't work, and even the max_selected_options can't work at all. – paugoo Aug 14 '13 at 12:42
Here's a [fiddle](http://jsfiddle.net/55FDq/) showing it working. I think you need to use chosen 1.0 to get the destroy functionality. – Gruff Bunny Aug 14 '13 at 17:56

score 1 · Answer 2 · answered Aug 14 '17 at 11:58

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>

change jquery chosen max_selected option dynamically

2 Answers2