Tips and Tricks - jQuery Select2 Plugin

October 17, 2012

Web developers have the unique challenge of marrying coding logic and visual presentation to create an amazing user experience. Trying to find a balance between those two is pretty difficult, and it's easy to follow one or the other down the rabbit hole. What's a web developer to do?

I've always tried to go the "work smarter, not harder" route, and when it comes to balancing functionality and aesthetics, that usually means that I look around for plugins and open source projects that meet my needs. In the process of sprucing up an form, I came across jQuery Select2, and it quickly became one of my favorite plugins for form formatting. With minimal scripting and little modification, you get some pretty phenomenal results.

We've all encountered drop-down selection menus on web forms, and they usually look like this:

Option Select

Those basic drop-downs meet a developer's need for functionality, but they aren't winning any beauty pageants. Beyond the pure aesthetic concerns, when a menu contains dozens (or hundreds) of selectable options, it becomes a little unwieldy. That's why I was so excited to find Select2.

With Select2, you can turn the old, plain, boring-looking select boxes into beautiful, graceful and more-than-functional select widgets:

Pretty Option Select

Not only is the overall presentation of the data improved, Select2 also includes an auto-complete box. A user can narrow down the results quickly ad easily, and if you've got some of those endlessly scrolling select boxes of country names or currencies, your users will absolutely notice the change (and love you for it).

What's even sexier than the form facelift is that you can add the plugin to your form in a matter of minutes.

After we download Select2 and upload it to our box, we add our the jQuery library and scripts to the <head> of our document:

<script src="jquery.js" type="text/javascript"></script> 
<script src="select2.js" type="text/javascript"></script>

For the gorgeous styling, we'll also add Select2's included style sheet:

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

Before we close our <head> tag, we invoke the Select2 function:

<script>
$(document).ready(function() { $("#selectPretty").select2(); });
</script>

At this point, Select2 is locked and load, and we just have to add the #selectPretty ID to the select element we want to improve:

<select id="selectPretty">
<option value="Option1">Option 1</option>
<option value="Option2">Option 2</option>
<option value="Option3">Option 3</option>
<option value="Option4">Option 4</option>
</select>

Notice: the selectPretty ID is what we defined when we invoked the Select2 function in our <head> tag.

With miniscule coding effort, we've made huge improvements to the presentation of our usually-boring select menu. It's so easy to implement that even the most black-and-white coding-minded web developers can add some pizzazz to their next form without having to get wrapped up in styling!

-Cassandra

Comments

October 21st, 2012 at 10:27pm

Its really cool, thanks a lot for the share.

October 23rd, 2012 at 8:38am

Cassandra could you advice any e-book or book that covers Jquery with all aspects.

October 29th, 2012 at 8:58am

Hi there! Like many programmers, I have a huge library full of programming books that I use often as reference. One of my favorites for jQuery is the jQuery Cookbook http://www.amazon.com/jQuery-Cookbook-Solutions-Examples-Developers/dp/0596159773/ref=sr_1_7?ie=UTF8&qid=1351519007&sr=8-7&keywords=jquery this has been one of my favorite references as it covers practical solutions, though it is hard to find one particular book that covers EVERYTHING, I think it's best to learn from use case scenarios. Hope this helps!

November 28th, 2012 at 8:41am

Thank you very much! I always enjoy being able to assist any way I can. Also, if there's any specific topics you'd like us to cover, we're more than happy to accept feedback!

April 16th, 2013 at 8:56pm

Very nice post and really help me

May 17th, 2013 at 4:41am

I'm using Jquery select2 but it is very slow on larger number of lists.Can anyone help me out regarding this. How to make it work fast?

July 29th, 2013 at 10:42am

Hi Cassandra,
Thank you for the nice 1,2,3

How do I set the initial null value of the select?
I am getting "undefined" but then I click the select list and all is fine, my null value -Select - shows, and I can search on the list.

Thank you, Bill

August 20th, 2013 at 6:10pm

Hi Cassandra,
The one question is what does your dir look like where you installed it? It has 42 javascript files. Did you install all of them or just the select2.js?

Thanks,

Andrew

October 20th, 2013 at 2:50pm

hi, how can i detect with jquery when i choose an option in select2

October 28th, 2013 at 9:23am

Priyatam: how large of a return are you looking at? If it's extremely large, I would have a go at lazy loading.

BillC: you shouldn't be getting undefined, are you sure you correctly selected the ID of the element? If so, are you sure you defined the value attribute within the options?

Andrew: I just installed the select2.js and the jquery.js, it was as simple as that!

besim: If you mean detecting a change in the select option, I would have a look at the change() function: http://api.jquery.com/change/ - is this what you meant?

Leave a Reply

Filtered HTML

  • Web page addresses and e-mail addresses turn into links automatically.
  • You can enable syntax highlighting of source code with the following tags: <pre>, <blockcode>, <bash>, <c>, <cpp>, <drupal5>, <drupal6>, <java>, <javascript>, <php>, <python>, <ruby>. The supported tag styles are: <foo>, [foo].
  • Allowed HTML tags: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Lines and paragraphs break automatically.

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.
By submitting this form, you accept the Mollom privacy policy.

Comments

October 21st, 2012 at 10:27pm

Its really cool, thanks a lot for the share.

October 23rd, 2012 at 8:38am

Cassandra could you advice any e-book or book that covers Jquery with all aspects.

October 29th, 2012 at 8:58am

Hi there! Like many programmers, I have a huge library full of programming books that I use often as reference. One of my favorites for jQuery is the jQuery Cookbook http://www.amazon.com/jQuery-Cookbook-Solutions-Examples-Developers/dp/0596159773/ref=sr_1_7?ie=UTF8&qid=1351519007&sr=8-7&keywords=jquery this has been one of my favorite references as it covers practical solutions, though it is hard to find one particular book that covers EVERYTHING, I think it's best to learn from use case scenarios. Hope this helps!

November 28th, 2012 at 8:41am

Thank you very much! I always enjoy being able to assist any way I can. Also, if there's any specific topics you'd like us to cover, we're more than happy to accept feedback!

April 16th, 2013 at 8:56pm

Very nice post and really help me

May 17th, 2013 at 4:41am

I'm using Jquery select2 but it is very slow on larger number of lists.Can anyone help me out regarding this. How to make it work fast?

July 29th, 2013 at 10:42am

Hi Cassandra,
Thank you for the nice 1,2,3

How do I set the initial null value of the select?
I am getting "undefined" but then I click the select list and all is fine, my null value -Select - shows, and I can search on the list.

Thank you, Bill

August 20th, 2013 at 6:10pm

Hi Cassandra,
The one question is what does your dir look like where you installed it? It has 42 javascript files. Did you install all of them or just the select2.js?

Thanks,

Andrew

October 20th, 2013 at 2:50pm

hi, how can i detect with jquery when i choose an option in select2

October 28th, 2013 at 9:23am

Priyatam: how large of a return are you looking at? If it's extremely large, I would have a go at lazy loading.

BillC: you shouldn't be getting undefined, are you sure you correctly selected the ID of the element? If so, are you sure you defined the value attribute within the options?

Andrew: I just installed the select2.js and the jquery.js, it was as simple as that!

besim: If you mean detecting a change in the select option, I would have a look at the change() function: http://api.jquery.com/change/ - is this what you meant?

Leave a Reply

Filtered HTML

  • Web page addresses and e-mail addresses turn into links automatically.
  • You can enable syntax highlighting of source code with the following tags: <pre>, <blockcode>, <bash>, <c>, <cpp>, <drupal5>, <drupal6>, <java>, <javascript>, <php>, <python>, <ruby>. The supported tag styles are: <foo>, [foo].
  • Allowed HTML tags: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Lines and paragraphs break automatically.

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.
By submitting this form, you accept the Mollom privacy policy.