Bootstrap Dual Listbox

Example with default values

The dual listbox is created from a select multiple by calling .bootstrapDualListbox(settings); on a selector. The selector can be any element, not just selects. When the method is called on a selector other than a select, then all select childrens are converted into dual list boxes.

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

Example with custom settings

var demo2 = $('.demo2').bootstrapDualListbox({
  nonSelectedListLabel: 'Non-selected',
  selectedListLabel: 'Selected',
  preserveSelectionOnMove: 'moved',
  moveOnSelect: false,
  nonSelectedFilter: 'ion ([7-9]|[1][0-2])'
});

Dynamically add options to the selects

The options must be added to/removed from the original select.
Note that the refresh must be run on it after manipulating the options.

If there are some highlighted options in the lists, then calling the refresh method with the optional true parameter results the highlights to be removed. Example usage: demo2.bootstrapDualListbox('refresh', true);
It has meaning only when moveOnSelect setting is false.

Add options to demo2 Add with clearing highlights

$("#demo2-add").click(function() {
  demo2.append('ApplesOranges');
  demo2.bootstrapDualListbox('refresh');
});

$("#demo2-add-clear").click(function() {
  demo2.append('ApplesOranges');
  demo2.bootstrapDualListbox('refresh', true);
});

Settings

When calling $("#element").bootstrapDualListbox() you can pass a parameters object with zero or more of the following:

Methods

You can modify the behavior and aspect of the dual listbox by calling its methods, all of which accept a value and a refresh option. The value determines the new parameter value, while refresh (optional, defaults to false) tells whether to update the plugin UI or not.

To call methods on the dual listbox instance, use the following syntax:

$(selector).bootstrapDualListbox(methodName, parameter);

Note: when making multiple chained calls to the plugin, set refresh to true to the last call only, in order to make a unique UI change; alternatively, you can also call the refresh method as your last one.

Here are the available methods: