Light Weight MultiSelect Test Page

This is a super light weight jQuery plugin that converts a multiselect drop menu into a simple two panel selection interface. The UI is completely controlled via CSS, so you can change the look and feel to your needs. The js file is 4kb after minification, 2kb for the CSS and 2kb for the double arrow icon.

The plugin is written and maintained by Benny Lin. The design is created by Monique Aviles.

Current version: 1.1.0 (7/11/2013)
License: MIT/GPL
Requires: jQuery 1.7+
Browsers: IE8+, FF, Chrome, Safari

Turns this:

Into this:

Getting Started

Download the package. There are three files that you’ll need, jquery.lwMultiSelect.min.js, jquery.lwMultiSelect.css and doublearrow.png.

<!-- include the css and js file -->
<link href="jquery.lwMultiSelect.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="jquery.lwMultiSelect.min.js">
</script>
<script type="text/javascript">
    $(document).ready(function() {
      //initialize the element
      $('#selectmenu').lwMultiSelect();       
    });
</script>

Options

addAllText – The text for the select all link. Defaults to “Select All”.
removeAllText – The text for the remove all link. Defaults to “Remove All”.
selectedLabel – The text that appears to the right of the counts. Defaults to “Values accepted”,
maxSelect – Limit how how items users can select. Defaults to “0” for unlimited.
maxText – If there’s a maxSelect, this text will be displayed in place of the Select/Remove All buttons.
onChange – Call back function whenever there’s an selection.

$('#selectmenu').lwMultiSelect({
  addAllText:'Add All', 
  removeAllText:'Clear', 
  selectedLabel:'Selected', 
  onChange: function() { //do something }
});

Methods

$('#selectmenu').lwMultiSelect(); //initialize the plugin 
$('#selectmenu').val(); //get currently selected values.
//access to public methods via data properties.
$('#selectmenu').data('plugin_lwMultiSelect').updateList(); //refresh the containers with the current options in #selectmenu
$('#selectmenu').data('plugin_lwMultiSelect').selectAll(); //select all visible items on the left container
$('#selectmenu').data('plugin_lwMultiSelect').removeAll(); //remove all selected  items

More Demos

Default Selections

<select id="defaults" multiple>
  <option value="Audi">Audi</option>
  <option value="BMW" selected="selected">BMW</option>
  <option value="Buick">Buick</option>
</select>

$('#defaults').lwMultiSelect(); //initialize the plugin

Speed Demo
I tested the select all on a list of 1.5k options and it executes under 500ms.

Dynamic Updates
Refresh country list with the default car list from above: try here

<script>
  function modList() {
    //overwrite countries with defaults' select list
    $('#countries').html($('#defaults').html())
      .data('plugin_lwMultiSelect').updateList();  //refresh the countries multiselect    
  }
</script>
<a href="javascript:modList();">try here</a>

Max Selection
Limit how many items a user can select.

$('#maxselect').lwMultiSelect({
  maxSelect: 4,
  maxText: 'Select up to 4'
});

Please post bug reports and other contributions to the GitHub issue tracker.

jQuery Plugin: Light Weight MultiSelect

More Demos