Chosen

Chosen is a JavaScript plugin for Prototype and jQuery that makes long, unwieldy select boxes much more user-friendly. For more information (including usage, explanation and faqs), check out the online documentation.

Standard Select

Turns This
Into This

Multiple Select

Turns This
Into This

<optgroup> Support

Single Select with Groups
Multiple Select with Groups

Selected and Disabled Support

Chosen automatically highlights selected options and removes disabled options.

Single Select
Multiple Select with Groups

Default Text Support

Chosen automatically sets the default field text ("Choose a country...") by reading the select element's data-placeholder value. If no data-placeholder value is present, it will default to "Select Some Option" or "Select Some Options" depending on whether the select is single or multiple. You can change these elements in the plugin js file as you see fit.

<select data-placehoder="Choose a country..." style="width:350px;" multiple class="chzn-select">

Note: on single selects, the first element is assumed to be selected by the browser. To take advantage of the default text support, you will need to include a blank option as the first element of your select list.

Change / Update Events

Setup (for jQuery)

Using Chosen is easy as can be.

  1. Download the plugin and copy the chosen files to your app.
  2. Activate the plugin on the select boxes of your choice: $(".chzn-select").chosen()
  3. Disco.