## Bootstrap Dual Listbox

Bootstrap Dual Listbox is a responsive dual listbox widget optimized for Twitter Bootstrap. It works on all modern browsers and on touch devices.

### 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 = $('[name=duallistbox_demo1]').bootstrapDualListbox();

### Example with custom settings

    $('.demo2').bootstrapDualListbox({
        nonselectedlistlabel: 'Non-selected',
        selectedlistlabel: 'Selected',
        preserveselectiononmove: 'moved',
        moveonselect: false,
        initialfilterfrom: 'ion ([7-9]|[1][0-2])'
    });

### new Dynamically add options to the selects

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. Example usage: `demo2.trigger('bootstrapduallistbox.refresh', true)`
It has meaning only when `moveonselect` setting is `false`.

    $("#demo2-add").click(function(){
        demo2.append('<option value="apples">Apples</option><option value="oranges" selected>Oranges</option>');
        demo2.trigger('bootstrapduallistbox.refresh');
    });

    $("#demo2-add-clear").click(function(){
        demo2.append('<option value="apples">Apples</option><option value="oranges" selected>Oranges</option>');
        demo2.trigger('bootstrapduallistbox.refresh', true);
    });

### Settings

`preserveselectiononmove`
  `false`: Selections are cleared on move. This is the forced setting on Android because of a bug.
  `'moved'`: Selection is cleared in the list where the options are moved to, and the moved options are selected after move.
  `'all'`: Selection is preserved between the lists, so the previously selected options are selected even after moving them or other options into their list.
`moveonselect`
  `true`: The options are automatically moved on selection. This setting is forced on touch devices.
  `false`: The selected options can be moved with a button.
`initialfilterfrom`
  `''`: This is the initial value of the filter for the unselected values (left side). Default is empty string.
`initialfilterto`
  `''`: This is the initial value of the filter for the selected values (on the right). Default is empty string.
`helperselectnamepostfix`
  `'_helper'`: when set, the helper selects are submitted with the original selects name postfixed with this value.
  `false`: the helper selects are not submitted.
`infotext`
  `'Showing all {0}'`: this is the info text when no filter applied to the options list and the list is not empty.
  `false`: None of the info texts are visible.
`infotextfiltered`
  `'<span class="label label-warning">Filtered</span> {0} from {1}'`: this is the info text when not all of the options are visible.
`infotextempty`
  `'Empty list'`: this is the info text when the list is empty.
`selectorminimalheight`
  `100`: this is the minimal height of the rendered selects in pixels (normally they inherit the original selects height, but this is 0 in a modal when duallistbox is initialized, so this will be the height in such cases).
`filterplaceholder`
  `'Filter'`: this is the text of the placeholder for the filter field
`filtertextclear`
  `'show all'`: this is the text on the button which clears the filters
`nonselectedlistlabel`
  `false`: This label is not displayed. Default option.
  `'string'`: The label for the non-selected options list
`selectedlistlabel`
  `false`: This label is not displayed. Default option.
  `'string'`: The label for the selected options list

### Download

Download from github. Please report issues and suggestions to github's issue tracker or contact me on g+ or twitter!