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