Make user-friendly select element with Chosen – jQuery

The Chosen jQuery plugin makes your HTML select element more user-friendly. It is available in both jQuery and Prototype flavor.

It can handle both single and multi-select options. Add a search box to filter the list of options.

There are various options available that allow us to customize the select element behavior.

---

Contents

1. Download and include
2. Initialize
3. Customization
4. Destroy
5. Conclusion

---

1. Download and include

• Download the latest release of the plugin from here.
• Include chosen CSS and script files with the jQuery library.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>

<!-- Chosen -->
<link href='chosen/chosen.min.css' rel='stylesheet' type='text/css'>
<script src='chosen/chosen.jquery.min.js' type='text/javascript'></script>

---

2. Initialize

Create your <select> element and call chosen() on the selector.

Syntax –

$(selector).chosen({ [options] });

Example

In the example, I have created one single and multiple options <select> elements. In the script, I call chosen() method on the select selector and to set the width of the select element define width option.

<!-- Dropdown1 -->
<select>
    <option>PHP</option>
    <option>jQuery</option>
    <option>AJAX</option>
    <option>JavaScript</option>
    <option>AngularJS</option>
    <option>Python</option>
</select>
<br/><br/>

<!-- Dropdown2 -->
<select multiple>
    <option>PHP</option>
    <option>jQuery</option>
    <option>AJAX</option>
    <option>JavaScript</option>
    <option>AngularJS</option>
    <option>Python</option>
</select>


<!-- Script -->
<script type="text/javascript">
$(document).ready(function(){
    $('select').chosen({ width:'200px' });
});
</script>

View Demo

---

3. Customization

Here, are some options to customize the default behavior –

• Change width

Use width option to change element width. In the above example, I used it.

Example

$('select').chosen({ width: "200px" });

• Hide search on single select element

The disable_search_threshold option hides the search box when the <select> element have less option than specified n value.

Example

Here, set the option value to 10 means search box not visible if total <option> is less than 10.

$('select').chosen({disable_search_threshold: 10});

• Default Text

Specify your default text in data-placeholder attribute.

<select data-placeholder="Choose programming language" style="width:200px;" multiple >

To set default text on single option <select> add an empty <option> and specify data-placeholder.

• Change no result found text

Set new value using no_results_text option.

$('select').chosen({no_results_text:"Not found"});

• Limit selected options in Multiselect

Define max_selected_options to limit the user from selecting the maximum number of options.

$('select').chosen({max_selected_options:2});

• Allow Deselect on Single Selects

Set allow_single_deselect: true.

$('select').chosen({allow_single_deselect:true});

NOTE – This will only works if first option is empty.

View Demo

---

4. Destroy

Pass "destroy" value in chosen() method to get back <select> element to its native form.

$('select').chosen('destroy');

---

5. Conclusion

The plugin works well on desktop and it supports all modern browsers – Firefox, Chrome, Safari, and IE9. Also enabled on IE8.

It doesn’t work on mobile devices the select element revert back to its native form.

To learn more about this plugin with examples follow the link.

You can also customize select element using Select2 plugin.

If you found this tutorial helpful then don't forget to share.