Have you ever included more than 100 elements in a single HTML select element? The result is a non-searchable long list of elements where you will be able to browse the options only with the initial letter of the entry, a small scrollbar, or with the keyboard up and down arrows. Fortunately, there is a solution to this problem, the Chosen JavaScript plugin.

In this tutorial, I will show you how to implement the Chosen JavaScript plugin on an HTML select element.

Installation

Let’s start from the beginning with the initial setup of Chosen.

The current version of the Chosen library can be downloaded with NPM, Bower, or Composer.

Once the compiled version of the library is installed, you have to load the JavaScript library and the related CSS file in your HTML document.

 <html>
   <head>
     <link rel="stylesheet" type="text/css" href="chosen.css">
   </head>
   <body>
     <script src="chosen.jquery.js"></script>
   </body>
 </html>

Please note that the references to the JavaScript file and the CSS file should be updated based on the actual location of the files.

Two other JavsScript resources are required to complete the initial setup correctly. The jQuery library (Chosen is based on jQuery) and the file used to initialize chosen on the HTML select elements.

<html>
  <head>
    <link rel="stylesheet" type="text/css" href="chosen.css">
  </head>
  <body>
    <script src="jquery.js"></script>
    <script src="chosen.jquery.js"></script>
    <script src="chosen-initialization.js"></script>
  </body>
</html> 

Create a simple HTML Select element handled by Chosen

Start by creating an HTML select with a couple of options included.

 <select>
   <option value="1">First Option</option>
   <option value="2">Second Option</option>
 </select>

To make the HTML select usable by Chosen, assign a custom identifier (in this example “standard”) and add the .chosen-select class.

 <select id="standard" class="chosen-select">
   <option value="1">First Option</option>
   <option value="2">Second Option</option>
 </select>

In the chosen-initialization.js file, we can let Chosen create the alternative and user-friendly select element with this instruction:

$('#standard').chosen();

Please note that this method should be invoked when the document is already loaded. For this reason, the resulting complete JavaScript script will be this.

(function($) {
  'use strict';
  $(document).ready(function() {
    $('#standard').chosen();
  });
})(window.jQuery);

Create a multiple select

A multiple select allows the selection of multiple values. With Chosen, you can create this type of select by adding the “multiple” attribute to the select HTML element.

<select id="multiple" multiple class="chosen-select">
  <option value="1">First Option</option>
  <option value="2">Second Option</option>
</select>

Create groups of entries

Groups of entries can be created exactly with the same method used for normal select elements. Simply nest the options HTML elements in the optgroup HTML element.

<select id="groups" class="chosen-select">
  <optgroup label="Group 1">
    <option value="1">First Option</option>
    <option value="2">Second Option</option>
  </optgroup>
  <optgroup label="Group 2">
    <option value="3">Third Option</option>
    <option value="4">Fourth Option</option>
  </optgroup>
</select>

Customize the text displayed in the Chosen select

When no options are selected, the Chosen JavaScript plugin displays a default text.

You can customize this default text with the “data-placeholder” attribute of the HTML element. In the example below, the default text is set to be “Select an item …”.

<select data-placeholder="Select an item ..." multiple id="custom-text" class="chosen-select">
  <option value="1">First Option</option>
  <option value="2">Second Option</option>
</select>

Create a select element for an RTL layout

If the website uses an RTL layout (for languages like Arabic, Urdu, etc.), you can display the RTL version of the select element generated by Chosen.

To do this, include a configuration object as a parameter for the chosen() method with the “rtl” property set to true.

$('#standard-rtl').chosen({rtl: true});

Trigger events when the select element of Chosen changes

Sometimes when the user changes the value of a select field, it’s useful to update other elements on the page. For example, a select element used to select a region should change the cities available in another select element.

In the example below, a callback function which generates an alert message is called each time the chosen select value changes.

$("#standard").chosen().change(function(){
  alert('The chosen select has been updated.');
});

Update Chosen when the values of the originating HTML select element change

When the values included in the select element used to originate the chosen version change, a manual update of Chosen is required to reflect the new values.

The instruction below updates a chosen select.

$("#standard").trigger("chosen:updated");

Destroy chosen

I can’t think of a real-world application for this command, but if you want to return to the original HTML select, this instruction solves the problem.

$("#standard").chosen("destroy");

Set a custom Width

Instead of manually modifying the Chosen CSS, you can set a custom width with the width property.

The width can be expressed in pixel:

$('#standard').chosen({width: "400px"});

Or also as a percentage:

$('#standard').chosen({width: "40%"});

You don’t always need to replace the regular HTML select elements in your project. Only with specific scenarios Chosen is recommended.

  • When there is a very high number of options.
  • When a search feature is required.
  • When the style of the select element is important. Because it’s much easier to style a chosen element than an HTML select element.

Since I used chosen in multiple projects, I can’t recommend it in the following situations:

  • If there are multiple long lists on the page. Because the transformation of the HTML select to the Chosen select slows down the rending of the page. Please note that this problem only happens when there are thousands of options included in the select elements generated by Chosen.
  • When the number of requests performed to load a page is an important factor. Because at least three resources are required to run Chosen: jQuery, The Chosen JavaScript library, and the Chosen CSS.