Responsive jQuery Dual Select Boxes For Bootstrap - Bootstrap Dual Listbox

Responsive jQuery Dual Select Boxes For Bootstrap - Bootstrap Dual Listbox
File Size: 31.2 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT

Bootstrap Dual Listbox is a responsive and touch enabled jQuery dual select boxes plugin for Bootstrap that allows you to move items between 2 list boxes.

How to use it:

1. Include jQuery library and jQuery jQuery Bootstrap Dual Listbox Plugin on the web page

<script src=""></script>
<script src="bootstrap-duallistbox/jquery.bootstrap-duallistbox.js"></script>
<link href="bootstrap-duallistbox/bootstrap-duallistbox.css" rel="stylesheet" type="text/css" media="all">

2. Include Twitter Bootstrap files on the page

<link href="bootstrap/css/bootstrap.css" rel="stylesheet" type="text/css" media="all">
<link href="bootstrap/css/bootstrap-responsive.css" rel="stylesheet" type="text/css" media="all">

3. Markup html structure. Not only select, you can also turn any html elements into dual list boxes

<select multiple="multiple" size="10" name="duallistbox_demo1">
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3" selected="selected">Option 3</option>
<option value="option4">Option 4</option>
<option value="option5">Option 5</option>
<option value="option6" selected="selected">Option 6</option>
<option value="option7">Option 7</option>
<option value="option8">Option 8</option>
<option value="option9">Option 9</option>
<option value="option0">Option 10</option>

4. Call the plugin

var demo1 = $('[name=duallistbox_demo1]').bootstrapDualListbox();

5. Settings.

// Bootstrap 3 support
bootstrap2compatible    : false,

// Default text
filterTextClear: 'show all',
filterPlaceHolder: 'Filter',
moveSelectedLabel: 'Move selected',
moveAllLabel: 'Move all',
removeSelectedLabel: 'Remove selected',
removeAllLabel: 'Remove all',

// 'all' / 'moved' / false
preserveselectiononmove : false,  

// true/false (forced true on androids, see the comment later)          
moveonselect            : true,             
initialfilterfrom       : '',               // string, filter selectables list on init
initialfilterto         : '',               // string, filter selected list on init
helperselectnamepostfix     : '_helper',    // 'string_of_postfix' / false
infotext: 'Showing all {0}',// text when all options are visible / false for no info text
infotextfiltered        : '<span class="label label-warning">Filtered</span> {0} from {1}',// when not all of the options are visible due to the filter
infotextempty           : 'Empty list',      // when there are no options present in the list
selectorminimalheight   : 100,
showfilterinputs        : true,
filterplaceholder       : 'Filter',
filtertextclear         : 'show all',
nonselectedlistlabel    : false,            // 'string', false
selectedlistlabel       : false,            // 'string', false
filteronvalues          : false             // filter by selector's values, boolean

Change log:

v3.0.5 (2015-11-13)

v3.0.2 (2014-06-29)

  • update.

v3.0.1 (2014-03-03)

  • New version

v2.1.1 (2014-03-03)

  • bug fixed

v2.1.0 (2014-02-03)

  • new setting: filteronvalues

v2.0.2 (2013-09-20)

  • Improved performance when showfilterinputs is false.

v2.0.2 (2013-09-20)

  • Improved performance when showfilterinputs is false.

v2.0.1 (2013-08-29)

  • updated demo to show bootstrap 3

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