This time I will share jQuery Plugin and tutorial about Lightweight Multi-select Combo Box Plugin For jQuery – SelectListActions, hope it will help you in programming stack.
SelectListActions is a lightweight jQuery plugin for creating a combo box control which allows the user to swap items between two or more select lists, with support for multiple selection and item sorting.
Basic usage:
1. Include both jQuery library and the jQuery SelectListActions plugin’s script at the bottom of your html page.
1 |
<script src="//code.jquery.com/jquery.min.js"></script> |
2 |
<script src="js/jquery.selectlistactions.js"></script> |
2. Add source and destination select lists together with control buttons into the page.
01 |
<select multiple id="source"> |
02 |
<option value="123">Superman</option> |
03 |
<option value="456">Batman</option> |
04 |
<option value="789">Spiderman</option> |
05 |
<option value="654">Captain America</option> |
08 |
<input type='button' id='btnAllRight' value='>>'> |
09 |
<input type='button' id='btnRight' value='>'> |
10 |
<input type='button' id='btnLeft' value='<'> |
11 |
<input type='button' id='btnAllLeft' value='<<'> |
13 |
<select multiple class="form-control" id="destination"> |
14 |
<option value="765">Nick Fury</option> |
15 |
<option value="698">The Hulk</option> |
16 |
<option value="856">Iron Man</option> |
3. The JavaScript to active the combo box.
01 |
$('#btnRight').click(function (e) { |
02 |
$('select').moveToListAndDelete('#source', '#destination'); |
06 |
$('#btnAllRight').click(function (e) { |
07 |
$('select').moveAllToListAndDelete('#source', '#destination'); |
11 |
$('#btnLeft').click(function (e) { |
12 |
$('select').moveToListAndDelete('#destination', '#source'); |
16 |
$('#btnAllLeft').click(function (e) { |
17 |
$('select').moveAllToListAndDelete('#destination', '#source'); |
This awesome jQuery plugin is developed by esausilva. For more Advanced Usages, please check the demo page or visit the official website.
