Dual Listbox

A better way to manage your multi select element.

Select by class source 

<select class="select1" multiple>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
</select>

<script>
    let dlb1 = new DualListbox('.select1');
</script>

Add options and add eventListeners source 

<select class="select2" multiple>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
</select>

<script>
    let dlb2 = new DualListbox('.select2', {
        availableTitle:'Available numbers',
        selectedTitle: 'Selected numbers',
        addButtonText: '>',
        removeButtonText: '<',
        addAllButtonText: '>>',
        removeAllButtonText: '<<',
        searchPlaceholder: 'search numbers'
    });
    dlb2.addEventListener('added', function(event){
        console.log(event);
    });
    dlb2.addEventListener('removed', function(event){
        console.log(event);
    });
</script>

Selected element:

  • Nothing yet

Remove all the buttons from being rendered. source 

<select class="select3" multiple>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
</select>

<script>
    let dlb3 = new DualListbox('.select3', {
        showAddButton: false,
        showAddAllButton: false,
        showRemoveButton: false,
        showRemoveAllButton: false
    });
</script>

Show the sort buttons source 

<select class="select4" multiple>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
</select>

<script>
    let dlb4 = new DualListbox('.select4', {
        showSortButtons: true,
    });
</script>

All options

Option Default Excepted values Explanation
draggable true boolean If the list items should be draggable.
showSortButtons false boolean If the sort buttons should be shown. (up and down)
enableDoubleClick true boolean If double clicking a list items should change column.
showAddButton true boolean If the "add" button should be shown.
showRemoveButton true boolean If the "remove" button should be shown.
showAddAllButton true boolean If the "add all" button should be shown.
showRemoveAllButton true boolean If the "remove all" button should be shown.
availableTitle "Available options" string The title that should be shown above the "Available options"
selectedTitle "Selected options" string The title that should be shown above the "Selected options"
addButtonText "add" string The text that should be displayed in the "add" button.
removeButtonText "remove" string The text that should be displayed in the "remove" button.
addAllButtonText "add all" string The text that should be displayed in the "add all" button.
removeAllButtonText "remove all" string The text that should be displayed in the "remove all" button.
searchPlaceholder "Search" string The text that should be displayed in the "search" fields.
upButtonText "up" string The text that should be displayed in the "up" button. (only when sorting is enabled)
downButtonText "down" string The text that should be displayed in the "down" button. (only when sorting is enabled)
options undefined Array<{text:"text to display", value: "what the select value should be", selected: false, order: 1}> A list of options that should be added. This will overwrite the select options
sortFunction Function Function A function to overwrite the default sorting that will be applied.

Public functions

Function name Arguments Explanation
changeOrder liItem, newPosition Change the order of the given list Element and the new position
addOptions options Add a single option to the options list.
addOption option, index (optional) Add a single option to the options list. Optionally add the index.
addEventListener eventName, callback Add an eventListener
changeSelected listItem Change the selected state of the list element.
actionAllSelected event (optional) Change all items to be selected.
actionAllDeselected event (optional) Change all items to not be selected.
redraw Redraw the lists.