Sometimes you may need to have a multiple selection element in a form. There are some ways to achieve this. You all have seen checkboxes, or multiple selection lists. But why not using a modern replacements like Chosen jQuery plugin instead. Chosen makes long HTML select boxes much more user-friendly. It’s built by HARVEST and supported by all modern desktop browsers. In this post you will find out how to use that in your projects. But first let’s have a look at the traditional options.

Checkbox

Checkboxes are the most common way to select multiple items:

Please select every hobby that you like:
Reading
Racing
Painting
Gardening
Surfing

Here’s the code:

Multiple selection list

Another way is to use multiple attribute in HTML select tag that transforms a drop-down list to a multiple selection list:

Please select every hobby that you like:

Here’s the code:

As you may know, in order to select the options you must Crtl+click (Windows) or Command+click (Mac). However, this is not obvious for most of the people.

Chosen jQuery plugin

One more user-friendly solution is to use a jQuery plugin such as Chosen that enhances functionality of a standard HTML select element. For instance, search-based filtering feature is very useful when you’re dealing with a long list. Here’s an example of Chosen jQuery plugin with the same options as above:


How to setup Chosen

1. Download the latest release from here (v1.1.0 at the time of writing this).
2. Unzip the file and upload the folder to your host. Then place this in the head of the page:

3. Place this in the body of the page:

4. Finally, place the javascript files at the end of the body:

Possible issues

1. If the input field is too small remove or comment out this display: inline-block; located in class .chosen-container in chosen.css.

chosen issue

Possible issue 1


2. If after selection of a few items an empty line appears at the end of the input field, add width: 25px !important; to the class .chosen-container-multi .chosen-choices li.search-field in chosen.css.

chosen issue

Possible issue 2

For more information or to contribute to the Chosen project please visit its GitHub page.