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.