Dual Listbox

A better way to manage your multi select element.

Select by class source

<select class="select1" multiple>
    <option value="1">A</option>
    <option value="2">B</option>
    <option value="3">C</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>