Turns This
Into This
Turns This
Into This
The disable_search_threshold option can be specified to hide the search input on single selects if there are n or fewer options: disable_search_threshold: 10
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 an 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-placeholder="Choose a country..." style="width:350px;" multiple class="chosen-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.
Setting the "No results" search text is as easy as setting
no_results_text: "Oops, nothing found!"
Single Select
Multiple Select
You can easily limit how many options the user can select by setting max_selected_options: 5
If you try to select another option with limit reached chosen:maxselected
event is triggered that executes the funcion you create in the input chosen_maxselected: function () {chosen_maxselected});
When a single select box isn't a required field, you can set allow_single_deselect: true
and Chosen will add a UI element for option deselection. This will only work if the first option has blank text.
You can set right-to-left text by setting
rtl: true
Single right to left select
Multiple right to left select
Using a custom width with Chosen is as easy as setting
width: "55%"
Single Select
Multiple Select
Use labels just like you would a standard select
Using Chosen is easy as can be.
1.
Download the plugin and install it in your environment.
2. Activate the plugin on the select boxes of your choice.
Do you have all the available options documented somewhere?
Yes! You can find them on the Details page.
Something doesn't work. Can you fix it?
Yes! Please report all issues using the Support page.
What browsers are supported?
All modern desktop browsers are supported (Firefox, Chrome, Safari and IE9). Legacy support for IE8 is also enabled.
Chosen is disabled on iPhone, iPod Touch, and Android mobile devices.