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 true. Using 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 300px using 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: infoText, infoTextFiltered, infoTextEmpty, filterPlaceHolder etc.

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.