Dual listbox is a simple and light weight component that makes multi select pretty and easy to use with only javascript. It supports filtering, sorting, programmatic control and a set of events and methods. It converts a regular select element into 2 select boxes with a number of actions that allow you to move items between windows. THis is a very basic example with default configuration.

In the following example we initialize dual listbox on empty select and add options dynamically in component JS configuration. All options are stored in JSON format and added in options config option. Available keys are: name, value and selected in boolean type with true value.

Dual listbox library allows you to customize all button labels, whether you want to change default labels or add localization support. The library includes 4 options for buttons that accept values in plain text or HTML formats: addButtonText, removeButtonText, addAllButtonText, removeAllButtonText. In this example we are using caret icons from our icon set.

The list of selected items supports manual ordering, where individual items in select area can be moved up and down on button click. This feature is simple and doesn't support multiple items selection, but in certain use cases it can be handy (e.g. to move important items into visible area and then store the list in cookies).

You can also hide action buttons individually or all together. Set the following options to false to hide buttons: showAddButton, showAddAllButton, showRemoveButton and showRemoveAllButton. If buttons are hidden, you can move select items from one window to another on double click.