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

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.


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=""></script>
	<script type="text/javascript" src="bala.DualSelectList/js/bala.DualSelectList.jquery.js"></script>


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>


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();

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.

One Reply to “Create filterable multiple-select function through 2 List-Boxes with drag and drop using Jquery”

  1. Thank you for this tutorial, Rohit. As a self-taught website developer, I am learning a lot from you. Keep up the good work, man.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.