Chosen

Chosen is a javsacript plug-in for Prototype (jQuery support coming soon) 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 title value. If no title 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 plug-in js file as you see fit.

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

Setup

Using Chosen is easy as can be.

  1. Download the plug-in and copy the chosen files to your app.
  2. Add the class chzn-select to any select box.
  3. Disco.