How do I use Chosen jQuery in my html file?

Question

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?

if you've included the file into your page, it should just be as simple as creating — ashley, Dec 18 '12 at 18:44

score 22 · Answer 1 · edited Jan 08 '16 at 12:46

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>

Ayman Safadi · Accepted Answer · 2012-12-18T19:15:43.837

7

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();
});

edited Dec 18 '12 at 19:15

answered Dec 18 '12 at 18:49

Ayman Safadi

11,502
1
27
41

What does .chosen() even do. I cant find any documentation on the method. – pnizzle Jul 07 '19 at 07:04
1

@pnizzle "Chosen is a jQuery plugin that makes long, unwieldy select boxes much more user-friendly." https://harvesthq.github.io/chosen/ `.chosen()` is how you apply the plugin to a selector. – Ayman Safadi Jul 08 '19 at 17:05
Right right. I've had a closer look at it. Very useful. – pnizzle Jul 08 '19 at 22:08

score 4 · Answer 3 · answered Dec 18 '12 at 18:45

<script type="text/javascript" src="chosen/chosen.jquery.min.js"></script>
<script type="text/javascript">
$(function(){
    $(".chzn-select").chosen();
});
</script>

<select class="chzn-select" 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>

How do I use Chosen jQuery in my html file?

3 Answers3

Linked