Menu
How do I apply Chosen jQuery in my html page?
I have a select form so I need to use the multiple select by Chosen to make it look more user friendly.
<select class="chosen" multiple="true" name="faculty">
<option value="AC">A</option>
<option value="AD">B</option>
<option value="AM">C</option>
<option value="AP">D</option>
</select>
I've downloaded the files and copied it into my webpage folder.
So, what I did was include the chosen.jquery.min.js in <head>:
<script type="text/javascript" src="chosen/chosen.jquery.min.js"></script>
And the instruction says to Call the chosen plugin: $(".chzn-select").chosen();
I don't know where to put that JavaScript statement in order to invoke Chosen multiple select. I thought it was as easy as using Bootstrap, hah. Any help?
558
InitializeCreate your <select> element and call chosen() on the selector. In the example, I have created one single and multiple options <select> elements. In the script, I call chosen() method on the select selector and to set the width of the select element define width option.
Chosen is a JavaScript plugin that makes select boxes user-friendly. It is currently available in both jQuery and Prototype flavors.
Your select must have the class chzn-select, and normally you would run a script after page load like the following:
$(function() {
$(".chzn-select").chosen();
});
Below is a tested, working example:
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.jquery.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.css">
</head>
<body>
<script type="text/javascript">
$(function() {
$(".chzn-select").chosen();
});
</script>
<select class="chzn-select" multiple="true" name="faculty" style="width:200px;">
<option value="AC">A</option>
<option value="AD">B</option>
<option value="AM">C</option>
<option value="AP">D</option>
</select>
</body>
</html>
If you follow one of Bootstrap's example markup structures, you'll notice that they call all their JavaScript files at the bottom (right above the </body> tag).
You'll want to do the same; something like:
</div> <!-- /container -->
<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="../assets/js/jquery.js"></script>
<script src="../assets/js/bootstrap-transition.js"></script>
<script src="../assets/js/bootstrap-alert.js"></script>
<script src="../assets/js/script.js"></script> <!-- Your custom JS -->
</body>
</html>
Inside this script.js file, you'll want to add something like:
$(function(){
$(".chzn-select").chosen();
});
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
