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