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. This example demonstrates
single option selection.
Multiple selection example. By default, only single selection is allowed: once you click on the option, it automatically moves to another box. To disable single selection and turn on multiple, set
moveOnSelect option to
false in plugin configuration. Defaults to
true and this option is forced to
true on the Android browser.
The following example demonstrates initialization of the dual listbox with a filter for the non selected elements, currently from 7 to 12. This can be applied only if
showFilterInputs is set to
selectedFilter option, listbox will filter selected elements only. You can use "Display all" button as a filter reset.
The following example demonstrates listbox with disabled filter input. By default, filter input field is always visible, unless
showFilterInputs option is set to
false. Please note: if false, all additional filter options such as filtered results will be disabled, but all plugin options related to selects will remain available.
This example demonstrates ability to change the minimal height of the generated dual listbox. Default listbox height is
200px, in this example the height is increased up to
selectorMinimalHeight option. This value is applied to the list itself, but not to the whole container with other elements.
This example demonstrates how custom text or language can be used in dual listbox controls. All this text labels and placeholders are fully editable through specified options, such as:
The options must be added to/removed from the original select. Note that the
bootstrapDualListbox.refresh event must be triggered on it after manipulating the options. If there are some highlighted options in the lists, then triggering the
bootstrapDualListbox.refresh event with the optional
true parameter results the highlights to be removed.