Easily Convert Select Box into Check Box List With jQuery

So everyone knows HTML offers default multiple select box tag and it is user friendly and used in almost all the web apps/websites (whenever needed). But there are times when you have clients who are not that tech savvy and even don’t want to press ‘ctrl’ key to select multiple options :P, Yep I have had a similar experience. So what could be the best possible and easiest solution? Show them check boxes in dropdown? Yeah that could be one solution but do you think it’s easy and optimal?

multiselectjs

I started searching and few good souls shared same problem statements in forums and blogs. I went to some solutions and they used CSS to change the entire look and feel of default select box. Then I learned about a cool jQuery Plugin named “multiselect.js”.   Actually it’s a jQuery UI Widget but its built from  jQuery MultiSelect Plugin by the same author Eric Hynds (Kudos to him).

            Live Demo

All you need to do is to include some libraries in your page and use them. Since multiselect UI widget is built on top of jQuery and jQuery UI so you need to include these two libraries then include multiselect.js and few css files. To convert a HTML select box to a basic multiselect checkbox list you need to only call multiselect() function.

</p>
$(function(){
 $("#new select").multiselect();
});
<p style="text-align: justify;">

This short code is the basic implementation and will do the job for you. Further I would want you to check official documentation and demo (Its awesome).

Take me to official demo

You can do a lot more with many custom options provided in the plugin. Share this short article with your friends and followers.

About sanjeev

sanjeev
Dreamer, Blogger and Thinker. I love to help people in solving their problems. You can also join me HERE

Related posts:

Leave a Reply

Your email address will not be published. Required fields are marked *