Skip to content
Steve James edited this page Feb 10, 2018 · 16 revisions

Usage

Requirements

  • jQuery 1.4.2+
  • jQuery UI 1.11 widget factory and effects (if you'd like to use them)
  • A jQuery UI theme
  • This widget: jquery.multiselect.js
  • The CSS file: jquery.multiselect.css

The Basics

Construct a standard multiple select box. The multiple attribute is required:

<select id="example" name="example" multiple="multiple">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
</select>

Note: It is important to terminate each option with an explicit tag to eliminate prevent white space that can affect features like selection lists.

Once the document is ready, initialize the widget on the select box:

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

Filter Plugin

A filtering widget is available which, once initialized on a multiselect instance, will insert a text box inside the widget header. Typing in the input will filter rows and return matches in real time. The demos folder contains an example of its usage.

$("select").multiselect().multiselectfilter();
Clone this wiki locally