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 |

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:
- jQuery Plugin For Drag and Drop Multi-Select List Box - fieldChooser
- Responsive jQuery Dual Select Boxes For Bootstrap - Bootstrap Dual Listbox
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.
$('select').DualListBox();
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.
$('select').DualListBox({ // 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, selectClass:'form-control', 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.