In this tutorial I am going to share a jQuery plugin to create filterable multiple-select function through 2 List-Boxes. User can also drag and drop item from one list box to another.
Libraries
This plugin dependent on jQuery core library so first include jQuery core library after that call plugins libraries.
<link rel="stylesheet" type="text/css" href="bala.DualSelectList/css/bala.DualSelectList.css"> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">script> <script type="text/javascript" src="bala.DualSelectList/js/bala.DualSelectList.jquery.js">script> |
HTML
Simply create HTML div container where you need to display dual multi-select list box.
|
JS
Create DualSelectList with candidate items
var dsl = $('#dualSelectExample').DualSelectList({ 'candidateItems' : ['Item 01', 'Item 02', 'Item 03', 'Item 04', 'Item 05', 'Item 06', 'Item 07'], 'selectionItems' : ['Item 08', 'Item 09', 'Item 10'] }); |
Set candidate / selection items after DualSelectList created
var dsl = $('#dualSelectExample').DualSelectList(); dsl.setCandidate(['Item 01', 'Item 02', 'Item 03', 'Item 04', 'Item 05']); dsl.setSelection(['Item 06', 'Item 07', 'Item 08', 'Item 09', 'Item 10']); |
Get select result
var res = dsl.getSelection(); console.log(res); |
Add new items to the list box.
See live demo and download source code.
Visit official github repository for more information and follow for future updates. Don’t forget to read license for using this plugin in your projects.
