jQuery Plugin For Multi Selection With Two Sides - lwMultiSelect

File Size: 12.4 KB
Views Total: 7999
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
jQuery Plugin For Multi Selection With Two Sides - lwMultiSelect

A lightweight multi select plugin for jQuery that transforms normal select element into dual select boxes with support for select all, remove all and click to add/remove.

See also:

How to use it:

1. Add references to jQuery library and the jQuery lwMultiSelect plugin's files into the html page.

<script src="//code.jquery.com/jquery.min.js"></script>
<link href="jquery.lwMultiSelect.css" rel="stylesheet">
<script src="jquery.lwMultiSelect.js"></script>

2. Call the function lwMultiSelect on the target multi select element and the plugin will take care of the rest.

$('#selector').lwMultiSelect();

3. Set the label text.

$('#selector').lwMultiSelect({
  addAllText: "Select All",
  removeAllText: "Remove All",
  selectedLabel: "Values accepted",
});

4. Specify the max number of entries allowed to be selected.

$('#selector').lwMultiSelect({
  maxSelect: 0, //0 = no restrictions
  maxText: '',
});

5. Fire a custom function on each change.

$('#selector').lwMultiSelect({
  onChange: function() { 
    //do something
  }
});

6. API methods.

// gets current values.
$('#selector').val(); 

// updates the select list
$('#selector').data('plugin_lwMultiSelect').updateList(); 

// selects all visible item
$('#selector').data('plugin_lwMultiSelect').selectAll();

// removes all selected items
$('#selector').data('plugin_lwMultiSelect').removeAll(); //remove all selected  items

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