Fully Customizable jQuery Select Element Plugin - Multiselect

Fully Customizable jQuery Select Element Plugin - Multiselect
File Size: 70.2 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Multiselect is a tiny jQuery plugin for creating your select with multiple attribute.

Features:

  • Keyboard support
  • Fully customizable via CSS
  • Callbacks, Search, Pre-selected, Public methods support

How to use it:

1.  Html

<html>
  <head>
    <link href="path/to/multiselect.css" media="screen" rel="stylesheet" type="text/css">
  </head>
  <body>
    <select multiple="multiple" id="my-select" name="my-select[]">
      <option value='elem_1'>elem 1</option>
      <option value='elem_2'>elem 2</option>
      <option value='elem_3'>elem 3</option>
      <option value='elem_4'>elem 4</option>
      ...
      <option value='elem_100'>elem 100</option>
    </select>
    <script src="path/to/jquery.multi-select.js" type="text/javascript"></script>
  </body>
</html>

2. Javascript

$('#my-select').multiSelect()

3. Options

  • afterInit - Call after the multiSelect initilization.
  • afterSelect - Call after one item is selected.
  • afterDeselect - Call after one item is deselected.
  • selectableHeader - Text or HTML to display in the selectable header.
  • selectionHeader - Text or HTML to display in the selection header.
  • selectableFooter - Text or HTML to display in the selectable footer.
  • selectionFooter HTML/Text - Text or HTML to display in the selection footer.
  • disabledClass - CSS class for disabled items.
  • selectableOptgroup - Click on optgroup will select all nested options when set to true.

Change log:

updated to v0.9.8 (2013-07-03)


This awesome jQuery plugin is developed by lou. For more Advanced Usages, please check the demo page or visit the official website.