multiselect – a jQueryUI form widget

Welcome to the multiselect project page! multiselect is a jQuery UI plugin that transforms a form select combobox into a dropdown menu, that utilizes YOUR jQueryUI theme!

Requirements

To use multiselect, it is recommended that you use jQuery version 1.6+. Reference the jQuery library followed the multiselect JavaScript file:

<!-- load jQuery library -->
<script src="/common/js/libs/jquery-1.6.min.js"></script>

<!-- load multiselect plugin -->
<script src="jquery.ui.multiselect.js"></script>

Now you are ready to use multiselect! Below is some example code on the ways you can use it.

Simple Multiselect

The easiest way to create the multiselect widget is to just call it on a <select> element.

<!-- transform a select box -->
<script>
  $('select').multiselect();
</script>

Multiselect w/ Options

• change: callback function for when an item is deselected or selected
• deselect: callback function for when an item is deselected
• label: sets the label for the dropdown widget (default is ‘– Select Option –’)
• minWidth: sets the minimum width of the dropdown widget (default is 200)
• maxWidth: sets the maximum width of the dropwdown before wrapping (no default set)
• scroll: sets the height of the dropdown options before scrolling (default is 0, no scrolling)
• select: callback function for when an item is selected

<!-- set your options -->
<script>
  $('select').multiselect({
    change: function() { console.log(this, 'changed'); },
    deselect: function() { console.log(this, 'deselected'); },
    label: 'Select Your Options', // default is '-- Select Option --'
    minWidth: 300, // default is 200
    maxWidth: 300, // no default max width
    scroll: 400,
    select: function() { console.log(this, 'selected'); },
  });
</script>

Initial Select (Pre-select)

If you want to have items initially selected by default, all you have to do is call the ‘select’ option of the plugin and pass it the index of the option you want to select.

$('select').multiselect('select', 0); // selects the first option
$('select').multiselect('select', 1); // selects the second option
// etc