Fully Customizable jQuery Select Element Plugin Multiselect - Free Download Fully Customizable jQuery Select Element Plugin - Multiselect

Free Download Fully Customizable jQuery Select Element Plugin – Multiselect

By Posted on

This time I will share jQuery Plugin and tutorial about Fully Customizable jQuery Select Element Plugin – Multiselect, hope it will help you in programming stack.

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

Demo Download

Multiselect is a tiny jQuery select replacement plugin that transforms the regular multiple select into a dual list box interface. 

Features:

  • Keyboard interactions.
  • Moves options between 2 side-by-side lists by click.
  • Supports native Optgroup, Selected, Disabled attributes.

How to use it:

1. Include jQuery library and the multiselect plugin’s files on the web page.

view source
1 <link href="/path/to/css/multiselect.css" rel="stylesheet" />
2 <script src="/path/to/cdn/jquery.js"></script>
3 <script src="/path/to/js/jquery.multi-select.js"></script>

2. Call the function multiSelect() on the existing select element and the plugin will do the rest.

view source
1 <select multiple="multiple" id="example" name="example[]">
2   <option value="option 1">Option 1</option>
3   <option value="option 2">Option 2</option>
4   <option value="option 3">Option 3</option>
5   <option value="option 4">Option 4</option>
6   ...
7   <option value="option n">Option n</option>
8 </select>
view source
1 $('#example').multiSelect();

4. Override the default settings to customize the plugin.

view source
01 $('#example').multiSelect({
02  
03   // select all nested options when clicking on the Optgroup
04   selectableOptgroup: false,
05  
06   // CSS class appended to the Disabled select
07   disabledClass : 'disabled',
08  
09   // select options by double-click instead
10   dblClick : false,
11  
12   // keep the original order
13   keepOrder: false,
14  
15   // additional CSS class(es)
16   cssClass: '',
17  
18   // custom header & footer HTML/Text
19   selectableHeader: null,
20   selectionHeader: null,
21   selectableFooter: null,
22   selectionFooter: null
23    
24 });

5. Callback functions available.

view source
01 $('#example').multiSelect({
02  
03   afterInit: function(container){
04     // after init
05   },
06   afterSelect: function(values){
07     // after select
08   },
09   afterDeselect: function(values){
10     // after deselect
11   }
12  
13 });

6. API methods.

view source
01 // add new option to the list
02 $('#example').multiSelect('addOption', {
03   value: 'option',
04   text: 'test',
05   index: 0,
06   nested: 'optgroup_label'
07 });
08  
09 // select an option
10 $('#example').multiSelect('select', String|Array);
11  
12 // deselect an option
13 $('#example').multiSelect('deselect', String|Array);
14  
15 // select all options
16 $('#example').multiSelect('select_all');
17  
18 // deselect all options
19 $('#example').multiSelect('deselect_all');
20  
21 // refresh
22 $('#example').multiSelect('refresh');

Change log:

v0.9.12 (2019-12-26)

  • JS updated
  • Doc updated

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

source : jquery.net

Related posts: