Click here to Skip to main content
Click here to Skip to main content

A Quick Note on "Chosen" - The Simple Way to Beautify Your Dropdown Boxes

By , 30 Aug 2012
Rate this:
Please Sign up or sign in to vote.

Introduction 

This is a quick note on "Chosen". It is a small light weight Javascript & CSS library that you can use to beautify your drop down boxes on your web pages.

Background

Recently my colleague showed me the small nice library "Chosen" and I liked it. Not only because it works, but also because it is small and easy to use. So I decided to keep a quick note, in case I may forget about it later. You can find the document for "Chosen" here, and you can download it from here.

The "Chosen" library is very easy to use. You can simply download it and put it in your web project. The attached is a small ASP.Net MVC project. Since not all the people have started to use MVC 3 & 4, the project is written in MVC 2. 

The "Chosen" library is very easy to use. You can simply add the downloaded CSS files and Javascript file in your project as shown in the above picture.  

Using the "chosen" library

To use the "Chosen" library in your web page, you need to add the references to the required CSS and Javascript files.  

Since "Chosen" is built upon jQuery, you will need to add the reference to the jQuery library too.  In your web page, you can then add your drop down boxes as how you usually add them.  

<select id="selState" data-placeholder="Choose a state"
            class="chzn-select" style="width: 200px">
            <option value=""></option>
            <option>Alabama</option>
            <option>Alaska</option>
            <option>Arizona</option>
            <option>Arkansas</option>
            <option>California</option>
            <option>Colorado</option>
            <option>Connecticut</option>
            <option>Delaware</option>
            <option>Florida</option>
            <option>Georgia</option> 
            <option>Hawaii</option>
            <option>Idaho</option>
            <option>Illinois</option>
            <option>Indiana</option>
            <option>Iowa</option>
            <option>Kansas</option>
            <option>Kentucky</option>
            <option>Louisiana</option>
            <option>Maine</option>
            <option>Maryland</option>
            <option>Massachusetts</option>
            <option>Michigan</option>
            <option>Minnesota</option>
            <option>Mississippi</option> 
            <option>Missouri</option>
            <option>Montana</option>
            <option>Nebraska</option>
            <option>Nevada</option>
            <option>New Hampshire</option>
            <option>New Jersey</option>
            <option>New Mexico</option>
            <option>New York</option>
            <option>North Carolina</option>
            <option>North Dakota</option>
            <option>Ohio</option>
            <option>Oklahoma</option>
            <option>Oregon</option>
            <option>Pennsylvania</option>
            <option>Rhode Island</option>
            <option>South Carolina</option>
            <option>South Dakota</option>
            <option>Tennessee</option>
            <option>Texas</option>
            <option>Utah</option>
            <option>Vermont</option>
            <option>Virginia</option>
            <option>Washington</option>
            <option>West Virginia</option>
            <option>Wisconsin</option> 
            <option>Wyoming</option>
</select> 
In your Javascript code, you can then beautify your drop down box with "Chosen" with a single line of  code.

$(document).ready(function () {
        $(".chzn-select").chosen({ no_results_text: "No matching state" });
}); 

Run the simple application 

With the help of "Chosen", we now have a nicely looking drop down box with filtering capability. Run the application we can see the drop down box in the web browser. 

Clicking on it, a nicely looking text box shows up that allows you to type in the text to search from you long list of select options.  

You can then select the option that you want to select from the filtered list.  



Points of Interest  

  • This is a quick note on "Chosen". It is a small light weight Javascript & CSS library that you can use to beautify your drop down boxes on your web pages.
  • The "Chosen" library is not mine. It is created by Matthew Lettini. The intention of this note is to keep a record in case that I may forget about it. Hopefully it may help the people who want to use "Chosen". You are free to download the attached Visual Studio project.
  • I hope you like my postings and I hope this small note can help you one way or the other.  

History 

First revision - 9/30/2012


License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

About the Author

Dr. Song Li

United States United States
I have been working in the IT industry for some time. It is still exciting and I am still learning. I am a happy and honest person, and I want to be your friend.

Comments and Discussions

 
-- There are no messages in this forum --
| Advertise | Privacy | Mobile
Web02 | 2.8.140415.2 | Last Updated 30 Aug 2012
Article Copyright 2012 by Dr. Song Li
Everything else Copyright © CodeProject, 1999-2014
Terms of Use
Layout: fixed | fluid