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="select1" 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