Geek asks and answers

Selected plugin max_selected_options

I am using the Chosen jquery plugin and I noticed that max_selected_options does not work:

The code looks like this:

<!doctype html> 
<html lang="en"> 
<head>
    <link rel="stylesheet" href="chosen/chosen.css" />
</head>
<body>

<select id="assets" data-placeholder="Choose assets" class="chzn-select" multiple style="width:350px;" tabindex="4">
    <option value="a">a</option>
    <option value="b">b</option>
    <option value="c">c</option>
    <option value="d">d</option>
    <option value="e">e</option>
    <option value="f">f</option>
    <option value="g">g</option>
</select>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script src="chosen/chosen.jquery.js" type="text/javascript"></script>
<script type="text/javascript"> 


    $(document).ready(function(){
        $(".chzn-select").chosen();
        $(".chzn-select-deselect").chosen({allow_single_deselect:true});
        $('.chzn-select').chosen({ max_selected_options: 3 });
        $(".chzn-select").bind("liszt:maxselected", function () { alert("a"); });
        $(".chzn-select").chosen().change( function () { alert("a"); } );
    });

</script>
</body>
</html>

I do not understand what is wrong for my code. This line:

$('.chzn-select').chosen({ max_selected_options: 3 });

should limit the maximum number of allowed samples. But that will not work. I can still select any number of items. I noticed that also the event that should be fired in the case of the maximum number of selected elements does not fire:

$(".chzn-select").bind("liszt:maxselected", function () { alert("a"); });

Do I have a bug in the code?

And one more question: how to add search functions to your list, for example, the search box that appears in the first example on the plugins page?

Thank.

+5
source share
1 answer

chosen(), :

$(".chzn-select").chosen();
$('.chzn-select').chosen({ max_selected_options: 3 });

, . JS- :

$(document).ready(function(){
    $(".chzn-select-deselect").chosen({allow_single_deselect:true});
    $(".chzn-select").chosen({ max_selected_options: 3 });
    $(".chzn-select").bind("chosen:maxselected", function () { alert("max elements selected"); });
    $(".chzn-select").chosen().change( function () { alert("change"); } );
});
+11

More articles:


All Articles