This is an awesome user-friendlier drop-in replacement for the standard <select> with multiple attribute activated.
http://krazedkrish.github.io/select-multiple/#demos
- Free (under MIT license)
- Works in an unobtrusive fashion
- Fully open sourced
- Keyboard support
- Provides some callbacks
- Fully customizable via CSS
- Depends on jQuery 1.8+
- Tiny code ~8kb minified
- Rails gem
- jQuery 1.8+
<html><head><linkhref="path/to/select-multiple.css" media="screen" rel="stylesheet" type="text/css"></head><body><selectmultiple="multiple" id="my-select" name="my-select[]"><optionvalue='elem_1'>elem 1</option><optionvalue='elem_2'>elem 2</option><optionvalue='elem_3'>elem 3</option><optionvalue='elem_4'>elem 4</option>
...
<optionvalue='elem_100'>elem 100</option></select><scriptsrc="path/to/jquery.select-multiple.js" type="text/javascript"></script></body></html>$('#my-select').selectMultiple()| Name | type | default | description |
|---|---|---|---|
| afterInit | function | function(container){} | Function to call after the selectMultiple initilization. |
| afterSelect | function | function(values){} | Function to call after one item is selected. |
| afterDeselect | function | function(values){} | Function to call after one item is deselected. |
| selectableHeader | HTML/Text | null | Text or HTML to display in the selectable header. |
| selectableFooter | HTML/Text | null | Text or HTML to display in the selectable footer. |
| disabledClass | String | 'disabled' | CSS class for disabled items. |
| selectableOptgroup | Boolean | false | Click on optgroup will select all nested options when set to true. |
| dblClick | Boolean | false | Replace the defautl click event to select items by the dblclick one. |
| cssClass | String | "" | Add a custom CSS class to the selectmultiple container. |
| allowHTML | Boolean | false | Don't escape items' HTML |
.selectMultiple(options)Activates your content as a selectmultiple. Accepts an optional options object
$('#your-select').selectMultiple({});Note: You must init the multiple select with $('#your-select').selectMultiple() before calling one of the following methods. .selectMultiple('select', String|Array)
Select the item with the value given in parameter. The value can be either a string ('elem_1') matching the value of the option oran Array of values (['elem_1', 'elem_42']).
$('#your-select').selectMultiple('select',String|Array);.selectMultiple('deselect',String|Array)Deselect the item with the value given in parameter. The value can be either a string ('elem_1') matching the value of the option oran Array of values (['elem_1', 'elem_42']).
$('#your-select').selectMultiple('deselect',String|Array);.selectMultiple('select_all')Select all elements.
$('#your-select').selectMultiple('deselect_all');.selectMultiple('deselect_all')Deselect all items previously selected.
$('#your-select').selectMultiple('select_all');.selectMultiple('refresh')Refresh current selectmultiple.
$('#your-select').selectMultiple('refresh');.selectMultiple('addOption',Hash)Dynamically add option to the selectmultiple. The options hash is described below:
| key | type | required | desription |
|---|---|---|---|
| value | String | true | The value of the option to create |
| text | String | true | The text of the option to create |
| index | Number | false | The index where to insert the option. If none given, it will be inserted as last option. |
| nested | String | false | If there are optgroups you can choose under which optgroup you want to insert the option. |
$('#your-select').selectMultiple('addOption',{value: 'test',text: 'test',index: 0,nested: 'optgroup_label'});Keyboard
| key | function |
|---|---|
| ↓ | Down arrow Select next item in the focused list |
| ↑ | Up arrow Select previous item in the focused list |
| — | Space Add/remove item depending on which list is currently focused |
<selectid='pre-selected-options' multiple='multiple'><optionvalue='elem_1' selected>elem 1</option><optionvalue='elem_2'>elem 2</option><optionvalue='elem_3'>elem 3</option><optionvalue='elem_4' selected>elem 4</option>
...
<optionvalue='elem_100'>elem 100</option></select>$('#pre-selected-options').selectMultiple();<selectid='callbacks' multiple='multiple'><optionvalue='elem_1'>elem 1</option><optionvalue='elem_2'>elem 2</option><optionvalue='elem_3'>elem 3</option><optionvalue='elem_4'>elem 4</option>
...
<optionvalue='elem_100'>elem 100</option></select>$('#callbacks').selectMultiple({afterSelect: function(values){alert("Select value: "+values);},afterDeselect: function(values){alert("Deselect value: "+values);}});- select all / deselect all
- select 100 elems / deselect 100 elems
- Add option
- refresh
<ahref='#' id='select-all'>select all</a><ahref='#' id='deselect-all'>deselect all</a><ahref='#' id='select-100'>select 100 elems</a><ahref='#' id='deselect-100'>deselect 100 elems</a><selectid='public-methods' multiple='multiple'><optionvalue='elem_1'>elem 1</option><optionvalue='elem_2' disabled>elem 2</option><optionvalue='elem_3'>elem 3</option><optionvalue='elem_4'>elem 4</option>
...
<optionvalue='elem_1000'>elem 100</option></select>$('#public-methods').selectMultiple();$('#select-all').click(function(){$('#public-methods').selectMultiple('select_all');returnfalse;});$('#deselect-all').click(function(){$('#public-methods').selectMultiple('deselect_all');returnfalse;});$('#select-100').click(function(){$('#public-methods').selectMultiple('select',['elem_0','elem_1'...,'elem_99']);returnfalse;});$('#deselect-100').click(function(){$('#public-methods').selectMultiple('deselect',['elem_0','elem_1'...,'elem_99']);returnfalse;});$('#refresh').on('click',function(){$('#public-methods').selectMultiple('refresh');returnfalse;});$('#add-option').on('click',function(){$('#public-methods').selectMultiple('addOption',{value: 42,text: 'test 42',index: 0});returnfalse;});<selectid='optgroup' multiple='multiple'><optgrouplabel='Friends'><optionvalue='1'>Yoda</option><optionvalue='2' selected>Obiwan</option></optgroup><optgrouplabel='Enemies'><optionvalue='3'>Palpatine</option><optionvalue='4' disabled>Darth Vader</option></optgroup></select>$('#optgroup').selectMultiple({selectableOptgroup: true});<selectid='disabled-attribute' disabled='disabled' multiple='multiple'><optionvalue='elem_1'>elem 1</option><optionvalue='elem_2'>elem 2</option><optionvalue='elem_3'>elem 3</option><optionvalue='elem_4'>elem 4</option>
...
<optionvalue='elem_100'>elem 100</option></select>$('#disabled-attribute').selectMultiple();Note: You can also deactivate option one by one by adding disabled attribute to each option you want to disable
bar
<selectid='custom-headers' multiple='multiple'><optionvalue='elem_1'>elem 1</option><optionvalue='elem_2'>elem 2</option><optionvalue='elem_3'>elem 3</option><optionvalue='elem_4'>elem 4</option>
...
<optionvalue='elem_100'>elem 100</option></select>$('#custom-headers').selectMultiple({selectableHeader: "<div class='custom-header'>Selectable items</div>",selectableFooter: "<div class='custom-header'>Selectable footer</div>"});Note: This feature is not built-in but depends on an other plugin. I personnally use the excellent quicksearch library, but you can use whatever library you like.
<selectid='custom-headers' multiple='multiple'><optionvalue='elem_1' selected>elem 1</option><optionvalue='elem_2'>elem 2</option><optionvalue='elem_3'>elem 3</option><optionvalue='elem_4' selected>elem 4</option>
...
<optionvalue='elem_100'>elem 100</option></select>$('.searchable').selectMultiple({selectableHeader: "<input type='text' class='search-input' autocomplete='off' placeholder='try \"12\"'>",afterInit: function(ms){varthat=this,$selectableSearch=that.$selectableUl.prev(),selectableSearchString='#'+that.$container.attr('id')+' .ms-elem-selectable';that.qs1=$selectableSearch.quicksearch(selectableSearchString).on('keydown',function(e){if(e.which===40){that.$selectableUl.focus();returnfalse;}});},afterSelect: function(){this.qs1.cache();},afterDeselect: function(){this.qs1.cache();}});http://krazedkrish.github.io/select-multiple
Based on https://github.com/lou/multi-select/