This is an awesome user-friendlier drop-in replacement for the standard <select>
with multiple attribute activated.
- 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
#Dependencies
- jQuery 1.8+
<html>
<head>
<link href="path/to/select-multiple.css" media="screen" rel="stylesheet" type="text/css">
</head>
<body>
<select multiple="multiple" id="my-select" name="my-select[]">
<option value='elem_1'>elem 1</option>
<option value='elem_2'>elem 2</option>
<option value='elem_3'>elem 3</option>
<option value='elem_4'>elem 4</option>
...
<option value='elem_100'>elem 100</option>
</select>
<script src="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. |
.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 |
<select id='pre-selected-options' multiple='multiple'>
<option value='elem_1' selected>elem 1</option>
<option value='elem_2'>elem 2</option>
<option value='elem_3'>elem 3</option>
<option value='elem_4' selected>elem 4</option>
...
<option value='elem_100'>elem 100</option>
</select>
$('#pre-selected-options').selectMultiple();
<select id='callbacks' multiple='multiple'>
<option value='elem_1'>elem 1</option>
<option value='elem_2'>elem 2</option>
<option value='elem_3'>elem 3</option>
<option value='elem_4'>elem 4</option>
...
<option value='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
<a href='#' id='select-all'>select all</a>
<a href='#' id='deselect-all'>deselect all</a>
<a href='#' id='select-100'>select 100 elems</a>
<a href='#' id='deselect-100'>deselect 100 elems</a>
<select id='public-methods' multiple='multiple'>
<option value='elem_1'>elem 1</option>
<option value='elem_2' disabled>elem 2</option>
<option value='elem_3'>elem 3</option>
<option value='elem_4'>elem 4</option>
...
<option value='elem_1000'>elem 100</option>
</select>
$('#public-methods').selectMultiple();
$('#select-all').click(function(){
$('#public-methods').selectMultiple('select_all');
return false;
});
$('#deselect-all').click(function(){
$('#public-methods').selectMultiple('deselect_all');
return false;
});
$('#select-100').click(function(){
$('#public-methods').selectMultiple('select', ['elem_0', 'elem_1' ..., 'elem_99']);
return false;
});
$('#deselect-100').click(function(){
$('#public-methods').selectMultiple('deselect', ['elem_0', 'elem_1' ..., 'elem_99']);
return false;
});
$('#refresh').on('click', function(){
$('#public-methods').selectMultiple('refresh');
return false;
});
$('#add-option').on('click', function(){
$('#public-methods').selectMultiple('addOption', { value: 42, text: 'test 42', index: 0 });
return false;
});
<select id='optgroup' multiple='multiple'>
<optgroup label='Friends'>
<option value='1'>Yoda</option>
<option value='2' selected>Obiwan</option>
</optgroup>
<optgroup label='Enemies'>
<option value='3'>Palpatine</option>
<option value='4' disabled>Darth Vader</option>
</optgroup>
</select>
$('#optgroup').selectMultiple({ selectableOptgroup: true });
<select id='disabled-attribute' disabled='disabled' multiple='multiple'>
<option value='elem_1'>elem 1</option>
<option value='elem_2'>elem 2</option>
<option value='elem_3'>elem 3</option>
<option value='elem_4'>elem 4</option>
...
<option value='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
<select id='custom-headers' multiple='multiple'>
<option value='elem_1'>elem 1</option>
<option value='elem_2'>elem 2</option>
<option value='elem_3'>elem 3</option>
<option value='elem_4'>elem 4</option>
...
<option value='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.
<select id='custom-headers' multiple='multiple'>
<option value='elem_1' selected>elem 1</option>
<option value='elem_2'>elem 2</option>
<option value='elem_3'>elem 3</option>
<option value='elem_4' selected>elem 4</option>
...
<option value='elem_100'>elem 100</option>
</select>
$('.searchable').selectMultiple({
selectableHeader: "<input type='text' class='search-input' autocomplete='off' placeholder='try \"12\"'>",
afterInit: function(ms){
var that = 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();
return false;
}
});
},
afterSelect: function(){
this.qs1.cache();
},
afterDeselect: function(){
this.qs1.cache();
}
});
http://krazedkrish.github.io/select-multiple
http://krazedkrish.github.io/select-multiple/#demos
Based on https://github.com/lou/multi-select/