Along with the text inputs, select fields are the most common form parts you can find on the web. Why not improving their usability and give your user more power and simplicity when dealing with them? In this article, I will show you a tutorial on how to implement a jQuery plugin called Select2 in your forms.

Let’s check the demo to see what you should get with Select2 :

See Demo

In this demo, both selects, in terms of HTML are almost exactly the same (only their ID changes). The main difference is that I applied the select2 plugin on the second one and not on the first one. As you can see, it slightly changes its design to a better one and add a searchable field that the user can use to quickly find the option he wants to pick without having to browse each of them. I personally find this super useful and nice for removing a part of the struggle users have sometimes filling long forms on a website.

Setting up Select2 on your page

The first part is to download the Select2 plugin from its author’s Github. After you have downloaded it, extract the ZIP and locate the folder dist/ inside.

We will need only one CSS file and one JS file to make it work :

  • The dist/css/select2.min.css
  • The dist/js/select2.full.min.js

Transfer these two files on your website.

Now, import the CSS file in your <head> :

<link rel="stylesheet" href="css/select2.min.css">

… and import the JS file after your jQuery call :

<script src="js/jquery.min.js"></script>
<script src="js/select2.full.min.js"></script>

Perfect, let’s now write the actual HTML of your select 😉

Making your Select HTML Field

This part is actually super easy. Just write a simple select HTML field just like you would do normally. It can be as simple as that :

<label for="my_select">What kind of developer are you?</label>
<select name="my_select" id="my_select">
	<option value="front_end">I'm a front-end developer</option>
	<option value="back_end">I'm a back-end developer</option>
	<option value="full_stack">I'm a full-stack developer</option>
</select>

Or it can be more complicated (with OptGroups for example) like in my demo :

<label for="my_select">Select your State</label>
<select id="my_select" name="my_select">
	<optgroup label="Alaskan/Hawaiian Time Zone">
       <option value="AK">Alaska</option>
       <option value="HI">Hawaii</option>
   </optgroup>
   <optgroup label="Pacific Time Zone">
       <option value="CA">California</option>
   </optgroup>
   <optgroup label="Mountain Time Zone">
       <option value="AZ">Arizona</option>
       <option value="CO">Colorado</option>
   </optgroup>
</select>

The only requirement is to have set a class name or an ID on your select just to be able to target it from the jQuery plugin.

Now that everything is in place, let’s just apply our Select2 plugin 🙂

The FUN part : jQuery Select2

Only one line of JS code is required to make jQuery Select2 to work, just target your select by its ID or classname, in our case, since our select ID is “my_select”, we can easily apply select2 like this :

$(document).ready(function() {
	$("#my_select").select2();
});

If you want to apply the plugin on all of the select of your page you can do it just like this :

$(document).ready(function() {
	$("select").select2();
});

And… done! If you refresh your page you should see it in action 🙂

So, it was easy isn’t it?

Many options can be passed to the plugin to really customize it or to improve your select fields even more. Good thing is, unlike many jQuery plugins, its author has put in place a really nice documentation website that you can check here.

Feel free to download the sources of the demo here :

Download Sources

If you have any questions, need any help or want to say something, feel free to leave a comment below…

… and don’t forget to subscribe if you want to receive new unique tutorials and source codes directly on your email :