Dual Listboxes

Select by class

                    <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

Selected element :

Nothing yet

                    <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>

Remove all the buttons from being rendered.

                    <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

                    <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.