User-friendly jQuery Multiple Select Plugin - Select Multiple

Select Multiple is a jQuery plugin that transform the default select list into a fully customizable multiple select with following features:

• Keyboard navigation.
• Select all / deselect all.
• Works nicely with big chunks of data.
• Custom select header and footer.
• Callback functions.

Basic usage:

1. Add the select-multiple.css in the head section, and the jquery.select-multiple.js at the bottom of the webpage.

<link href="css/select-multiple.css" rel="stylesheet">
...
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="js/jquery.select-multiple.js"></script>

2. Just call the selectMultiple() method on your existing multiple select element and done.

$('#el').selectMultiple();

3. Customize the multiple select.

// Click on optgroup will select all nested options.
selectableOptgroup: false,

// CSS class for disabled items.
disabledClass : 'disabled',

// Dounble click to select items.
dblClick : false,

// Text or HTML to display in the selectable header.
selectableHeader: null,

// Text or HTML to display in the selectable footer.
selectableFooter: null,

// Add a custom CSS class to the selectmultiple container.
cssClass: ''

4. Callback functions.

// executed after the selectMultiple initilization.
afterInit: function(container){} 

// executed after one item is selected.
afterSelect: function(values){}  

// executed after one item is deselected.
afterDeselect: function(values){}  

5. Public methods.

// Select the item with the value given in parameter. 
$('#el').selectMultiple('select', String|Array);

// Deselect the item with the value given in parameter. 
$('#el').selectMultiple('deselect', String|Array);

// Select all items.
$('#el').selectMultiple('select_all');

// Deselect all items previously selected.
$('#el').selectMultiple('deselect_all');

// Refresh current selectmultiple.
$('#el').selectMultiple('refresh');

// Dynamically add option to the selectmultiple. 
$('#el').selectMultiple('addOption', { value: 'test', text: 'test', index: 0, nested: 'optgroup_label' });

---

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