Menu
I use Chosen jquery plugin and I noticed that max_selected_options is not working:
The code is 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 don't understand what is incorrect to my code. This line:
$('.chzn-select').chosen({ max_selected_options: 3 });
should limit the maximum number of allowed selections. But it doesn't work. I still can select any number of items. I noticed that also the event that should be fired on the case the maximum number of selected items is reached doesn't fire:
$(".chzn-select").bind("liszt:maxselected", function () { alert("a"); });
Do I have any error in code?
And one more question: how can I add search functionality to my list, like the search box that appears on the first example on the plugins page?
Thanks.
598
By default, pressing delete/backspace on multiple selects will remove a selected choice.
Chosen is a JavaScript plugin that makes select boxes user-friendly. It is currently available in both jQuery and Prototype flavors.
You call twice the chosen() method, which is why you get problems:
$(".chzn-select").chosen();
$('.chzn-select').chosen({ max_selected_options: 3 });
Remove the first one and it works. Your JS code should be:
$(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"); } );
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
