Create filterable multiple-select function through 2 List-Boxes with drag and drop using Jquery

by Posted on

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.

<!--CSS-->
<link rel="stylesheet" type="text/css" href="bala.DualSelectList/css/bala.DualSelectList.css">
<!--JS-->
	<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.

<div id="dualSelectExample" style="width:500px; height:300px; background-color:#F0F0F0; padding:10px;"></div>



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.

dsl.setCandidate(items);

See live demo and download source code.

DEMO | DOWNLOAD

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.



Published by admin