Skip to content
Steve James edited this page Feb 16, 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 </option> tag to prevent trailing white space that can affect widget 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