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.

dsl.getSelection()

5. Add new items to the dual list box.

dsl.setCandidate(items)

Changelog:

2019-03-31

  • hotfix

2018-02-04

  • bug fix

2018-01-30

  • Correct position

2017-07-15

  • 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.