User-friendly jQuery Multiple Select Plugin - Select Multiple
File Size: | 70.1 KB |
---|---|
Views Total: | 3427 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
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.