- Main
- Dashboard
- Layouts
- Themes
- Starter kit
- Changelog 3.0
- RTL version
- Forms
- Form components
- JSON forms
- Text editors
- Pickers
- Form layouts
- Components
- Basic components
- Content styling
- Extra components
- Color system
- Animations
- Icons
- Layout
- Page layouts
- Sidebars
- Navbars
- Vertical navigation
- Horizontal navigation
- Menu levels
- Data visualization
- Echarts library
- D3 library
- C3 library
- Google charts
- Maps integration
- Extensions
- Extensions
- JQuery UI
- File uploaders
- Event calendars
- Internationalization
- Tables
- Basic tables
- Data tables
- Data tables extensions
- Responsive tables
- Page kits
- General pages
- Service pages
- User pages
- Application pages
- Widgets
Basic example
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
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.
Filtered results
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.
Disable filter
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.
Control boxes height
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.
Custom text support
This example demonstrates how custom text or language can be used in dual listbox controls. All these text labels and placeholders are fully editable through specified options, such as: infoText
, infoTextFiltered
, infoTextEmpty
, filterPlaceHolder
etc.
Adding options dynamically
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.