Efficient Dual List Box Plugin with jQuery and Bootstrap

File Size: 39.7 KB
Views Total: 42786
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Efficient Dual List Box Plugin with jQuery and Bootstrap

Just another jQuery & Bootstrap based dual list box plugin that is easy to implement and has the ability to load huge data from a JSON file using Ajax.

See also:

How to use it:

1. Include Twitter Bootstrap's CSS in the head section of the document.

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

2. Include jQuery library together with Twitter Bootstrap's JS and Bootstrap Dual List Box plugin at the bottom.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="dist/dual-list-box.js"></script>

3. Create a multi-select elemenet for the dual list box widget and use Html5 data-source to define the data source.

<select multiple="multiple" data-source="data/1000.json"></select>

4. The data structure in the 1000.json should be like this:

    "index": 0,
    "name": "Name 1",
    "company": "Company 1",
    "email": "[email protected]"
    "index": 1,
    "name": "Name 2",
    "company": "Company 2",
    "email": "[email protected]"
    "index": 2,
    "name": "Name 3",
    "company": "Company 3",
    "email": "[email protected]"
    "index": 3,
    "name": "Name 4",
    "company": "Company 4",
    "email": "[email protected]"
    "index": n,
    "name": "Name n",
    "company": "Company n",
    "email": "[email protected]"

4. Initialize the plugin.


5. Available options and defaults. All the options can be passed via Javascript object or Html5 data-OPTION attributes, as in data-source="data/1000.json";.

  • element: Select element in which you want to create this dual list box.
  • JSON: Whether to download the data via a JSON request.
  • uri: JSON file that can be opened for the data.
  • value: Value that is assigned to the value field in the option.
  • text: Text that is assigned to the option field.
  • title: Title of the dual list box.
  • json: Whether to retrieve the data through JSON.
  • timeout: Timeout for when a filter search is started.
  • horizontal: Whether to layout the dual list box as horizontal or vertical.
  • textLength: Maximum text length that is displayed in the select.
  • moveAllBtn:: Whether the append all button is available.
  • maxAllBtn: Maximum size of list in which the all button works without warning. 
  • selectClass: Default CSS class of the select box.
  • warning:: Warning message.
  // defaults
  element:    $(this).context,
  uri:        'local.json', 
  value:      'id',
  text:       'name',
  title:      'Example', 
  json:       true,
  timeout:    500, 
  horizontal: false,
  textLength: 45, 
  moveAllBtn: true,
  maxAllBtn:  500, 
  warning:    'Are you sure you want to move this many items? Doing so can cause your browser to become unresponsive.'

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