Press "Enter" to skip to content

A jQuery Plugin To Multi-Selection Function | DualSelectList

bala.DualSelectList is a jQuery plugin to provide multi-selection functionality through 2 List-Boxes. Another jQuery addition to creating a double-choice multiple-choice list box where users can move items between two filterable lists.

jquery dual listbox jsfiddle, moving items from one multi select list to another using jquery, pure js dual list box component, moving items from one multi select list to another using javascript

How to make use of it:

1. Download and insert the jQuery DualSelectList plugin’s files into your HTML web page which has the 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 component wherein you need to generate the dual listing field.

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

3. Initialize the plugin and define an array of listing objects you need to populate with.

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

// JSON object is supported as well
var dsl = $('#Example').DualSelectList({
    'candidateItems' : [
      {'id':0, 'value':'Item 01'},
      {'id':1, 'value':'Item 02'},
      {'id':2, 'value':'Item 03'}
    'selectionItems' : [
      {'id':3, 'value':'Item 04'},
      {'id':4, 'value':'Item 05'},
      {'id':5, 'value':'Item 06'}

4. Get the objects chosen by your users.


5. Add new objects to the dual listing field.


6. Set/reset the background color after DualSelectList has created.

dsl.setColor('panelBackground', 'red');

Easy Filterable Dual List Box Plugin, bala.DualSelectList Github, groupable searchable dual listbox plugin jquery transfer, hybrid dual list with filter

See Demo And Download

Official Website(balachuang): Click Here

This superior jQuery/javascript plugin is developed by balachuang. For extra advanced usage, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.