jQuery SelectList
By byanjankarsujan
May 25, 2018 /Blog
jQuery selectList is a jquery plugin to move selected options or select list from one select box to another. Move single, multiple or all options to another select box. Also search and sort content of the options in the select box for easy access.
Usage
Include the script in the page
<script type="text/javascript" src="selectList.js"></script>
Call selectList() function on any select box group element.
$('#select-list').selectList();
Options
The plugin accepts following options:
| Name | Type | Description | Default |
|---|---|---|---|
| from | String | Identifier of the selection list box to select the options from | |
| to | String | Identifier of he list box to move the selected list items to | |
| sort | Boolean | Sort the list after moving an option | true |
| adder | String | Identifier of the button which on click moves the option to selected list box from available option list box | |
| remover | String | Identifier of the button which on click removes the option from selected list box to available option list box | |
| mover | String | Identifier of the button which on click moves all the available options to selected list box from available option list box | |
| cleaner | String | Identifier of the button which on click removes all the available options from selected list box to available option list box | |
| notifier | String | Style added to the moved option to highlight the option movement activity | |
| notifytimer | Integer | Timeout for the notifier class to show in miliseconds | 800 |
| fromSearch | String | Identifier of the search box to search and filter the options in available options list by the content | |
| toSearch | String | Identifier of the search box to search and filter the options in selected options list by the content |
Example
JS
$('#select-list').selectList({
from: '#fromList',
to: '#toList',
sort: true,
adder: '#add',
remover: '#remove',
mover: '#move',
cleaner: '#clean',
notifier: 'select-highlight',
notifytimer: 800,
fromSearch:'#fromListSearch',
toSearch:'#toListSearch'
});
HTML
<div id="select-list"> <input id="fromListSearch" name="" type="text" placeholder="Search in available options list..." /><select id="fromList"> <option>Option 1</option> <option>Option 2</option>...... </select> <div class="buttons"></div> <input id="toListSearch" name="" type="text" placeholder="Search in selected list..." /><select id="toList"> <option>Option 1</option> <option>Option 2</option>...... </select> </div>
CSS
Feel free to give your own style 🙂
