CODEWITHSUNDEEP
jqueryjquery-plugins
MDIT
MDIT

Reputation: 1548

Chosen jQuery plugin - Limit Selected Options in Multiselect

I'm using Choosen jquery plugin, i would like to limit selected options in multiselect.There is a proposed solution $(".chosen-select").chosen({max_selected_options: 5}); but it doesn't work for me!!

This is my js file :

$(document).ready(function(){
// .....
$(".chosen-select").chosen({max_selected_options: 5});
//.....
});

And this is the php file :

<em>Country</em>
<select data-placeholder="Choose your country..." id="mycountry" class="chosen-select" multiple style="width:400px;" tabindex="4">
                <option value=""></option>
                <?php  
// Data from dataabse
?>
</select>

Upvotes: 0

Views: 10533

Answers (3)

Patrick
Patrick

Reputation: 589

This code works for me - 

 $(".demo-chosen-select").chosen({
    max_selected_options:3, //Max select limit 
    display_selected_options:true, 
    placeholder_text_multiple:"Select some options", 
    no_results_text:"Results not found", 
    enable_split_word_search:true, 
    search_contains:false, 
    display_disabled_options:true, 
    single_backstroke_delete:false,
    width:"200px", 
    inherit_select_classes:true 
 });

Thats it..

Upvotes: 7

alelade
alelade

Reputation: 1

Above solutions require passing an option on initialization. So you need to either set a global limit, or initialize each different limited select on page seperately.

I added following if block to the component in chosen.jquery.min.js (for Chosen v1.3.0)

Chosen.prototype.on_ready = function () {
if(this.form_field.getAttribute('data-limit')){
   this.max_selected_options = this.form_field.getAttribute('data-limit');
}
return this.form_field_jq.trigger("chosen:ready", {chosen: this})

This will read data-limit attribute from select and replace or create max_selected_option on initialization.

Upvotes: 0

MDIT
MDIT

Reputation: 1548

When installing Chosen, you have to add these lines in you web page :

<script type="text/javascript">
             var config = {
               '.chosen-select'           : {},
               '.chosen-select-deselect'  : {allow_single_deselect:true},
               '.chosen-select-no-single' : {disable_search_threshold:10},
               '.chosen-select-no-results': {no_results_text:'Oops, nothing found!'},
               '.chosen-select-width'     : {width:"95%"}
             }
             for (var selector in config) {
               $(selector).chosen(config[selector]);
             }

And you have to configure your chosen plugin using these lines. For example if you want to limit selected options in multiselect for five items. feel free to update this line '.chosen-select' : {}, with this new one : '.chosen-select' : {max_selected_options: 5},

this is all

Upvotes: 1

Related Questions