Easy Filterable Dual List Box Plugin - jQuery DualSelectList

Easy Filterable Dual List Box Plugin - jQuery DualSelectList
File Size: 9.24 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT

Yet another jQuery plugin for creating a multi-selectable dual list box where the users are able to move items between two filterable lists.

How to use it:

1. Download and insert the jQuery DualSelectList plugin's files into your html page which has jQuery library loaded.

<link rel="stylesheet" href="bala.DualSelectList.css">
<script src="/path/to/jquery.min.js"></script>
<script src="bala.DualSelectList.jquery.js"></script>

2. Create a container element in which you want to generate the dual list box.

<div id="example"></div>

3. Initialize the plugin and define an array of list items you want to populate with.

var dsl = $('#Example').DualSelectList({
    'candidateItems' : ['Item 01', 'Item 02', 'Item 03', 'Item 04', 'Item 05', 'Item 06', 'Item 07'],
    'selectionItems' : ['Item 08', 'Item 09', 'Item 03']

4. Get the items selected by your users.


5. Add new items to the dual list box.




  • hotfix


  • bug fix


  • Correct position


  • Revise some UX and add remark

This awesome jQuery plugin is developed by balachuang. For more Advanced Usages, please check the demo page or visit the official website.