Bootstrap Dual Listbox is a responsive dual listbox widget optimized for Twitter Bootstrap. It works on all modern browsers and on touch devices.
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();
$('.demo2').bootstrapDualListbox({
nonselectedlistlabel: 'Non-selected',
selectedlistlabel: 'Selected',
preserveselectiononmove: 'moved',
moveonselect: false,
initialfilterfrom: 'ion ([7-9]|[1][0-2])'
});
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);
});
bootstrap2compatiblefalse: Enable for Bootstrap 2.x compatibility.preserveselectiononmovefalse: 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.moveonselecttrue: 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'<col-md- class="label label-warning">Filtered</col-md-> {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.selectorminimalheight100: 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 fieldfiltertextclear'show all': this is the text on the button which clears the filtersnonselectedlistlabelfalse: This label is not displayed. Default option.'string': The label for the non-selected options listselectedlistlabelfalse: This label is not displayed. Default option.'string': The label for the selected options list