jQuery MultiSelect Widget

This jQuery plugin turns an ordinary HTML select control into an drop down list of checkboxes with themeroller support.

How to use the widget:

First you have to include the following files:

– jQuery 1.4.2+

– jQuery UI 1.8 widget factory and effects

– the widget: jquery.multiselect.js

– the CSS file: jquery.multiselect.css

<link rel="stylesheet" href="jquery.multiselect.css"/>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.8.20.custom.min.js"></script>
<script type="text/javascript" src="jquery.multiselect.min.js"></script>

After that construct a standard multiple select box. It must have the multiple attribute

<select id="multiselect" multiple="multiple">
  <option>Option 1</option>
  <option>Option 2</option>
  <option>Option 3</option>
  <option>Option 4</option>
  <option>Option 5</option>
</select>

Finally, you must initialize the widget:

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

Demo

For the documentation and to download the widget go here.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s