jQuery Dual List

Its a drop-in stylish replacement for the standard <select> with the multiple attribute

Getting Started

Requirements

There are a few requirements you need to meet before you can use jQuery Dual List, the most obvious of which is the inclusion of the jQuery library. You can grab the latest version here

Installation

Installing jQuery Dual List is pretty straight forward. Simply include the both the jQuery, jQuery Dual List and CSS library file e.g. jQuery dualList.js using script html element(s), like so: 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="js/dualList.js"></script>
Notice the jQuery library I included was google code library, We recommend using latest version. It is highly recommended that all JavaScript be placed after all your content at the footer of the page, just before the end </body> tag. This ensures that all content is loaded before manipulation of the DOM occurs.

Usage

Create your <select> with an ID or Class. You must add multiple attribute on it, otherwise jQuery Dual List won’t work properly.

<select id="duallist" multiple>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
    <option value="4">Option 4</option>
    <option value="5">Option 5</option>
    <option value="6">Option 6</option>
    ...
    ...
    <option value="100">Option 100</option>
</select>

Now activate the jQuery Dual List like this

$('#dual-list').dualList();

This

Becomes like this

Options

Available options :

Name type default description
class String null CSS class for the Dual List.
selectableListHeader Text null Text to display in the selectable list header.
selectedListHeader Text null Text to display in the selected list header.
selectableListClass String null CSS class for the selectable list.
selectedListClass String null CSS class for the selected list.
filter Boolean false true or false
filterBy String ‘value’ value or text
filterPlaceholder String ‘Filter options…’ Placeholder text for filter input field.
clickableOptGroup Boolean false Makes the optgroup label clickable.
itemsClass String null CSS class for the items.
afterAdded callback function(value){} Function to call after one item is selected/added.
afterRemoved callback function(value){} Function to call after one item is deselected/removed.

Examples

Standard Select

<!-- HTML -->
<select id="dual-list-standard" multiple>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
    <option value="4">Option 4</option>
    <option value="5">Option 5</option>
    <option value="6">Option 6</option>
    ...
    ...
    <option value="100">Option 100</option>
</select>
//-- Javascript --
$('#dual-list-standard').dualList();

Select with clickable optgroups

<!-- HTML -->
<select id="dual-list-optgroup" multiple>
    <optgroup label="Group 1">
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
    </optgroup>
    <optgroup label="Group 2">
        <option value="3">Option 3</option>
        <option value="4">Option 4</option>
    </optgroup>
    <optgroup label="Group 3">
        <option value="5">Option 5</option>
        <option value="6">Option 6</option>
    </optgroup>
</select>
//-- Javascript --
$('#dual-list-optgroup').dualList();

Select with option selected

<!-- HTML -->
<select id="dual-list-selected" multiple>
    <option value="1">Option 1</option>
    <option value="2" selected>Option 2</option>
    <optgroup label="Group 1">
        <option value="3">Option 3</option>
        <option value="4" selected>Option 4</option>
    </optgroup>
    <optgroup label="Group 2">
        <option value="5" selected>Option 5</option>
        <option value="6">Option 6</option>
    </optgroup>
</select>
//-- Javascript --
$('#dual-list-selected').dualList();

Select with disabled option/optgroup

<!-- HTML -->
<select id="dual-list-disabled" multiple>
    <option value="1"  selected disabled>Option 1</option>
    <option value="2">Option 2</option>
    <optgroup label="Group 1">
        <option value="3">Option 3</option>
        <option value="4">Option 4</option>
    </optgroup>
    <optgroup label="Group 2" disabled>
        <option value="5">Option 5</option>
        <option value="6">Option 6</option>
    </optgroup>
</select>
//-- Javascript --
$('#dual-list-disabled').dualList();

Select with disabled state

<!-- HTML -->
<select id="dual-list-disabled-state" multiple disabled>
    <option value="1"  selected disabled>Option 1</option>
    <option value="2">Option 2</option>
    <optgroup label="Group 1">
        <option value="3">Option 3</option>
        <option value="4">Option 4</option>
    </optgroup>
    <optgroup label="Group 2" disabled>
        <option value="5">Option 5</option>
        <option value="6">Option 6</option>
    </optgroup>
</select>
//-- Javascript --
$('#dual-list-disabled-state').dualList();

Select with Headers and Filters

<!-- HTML -->
<select id="dual-list-header" multiple>
    <option value="1"  selected>Option 1</option>
    <option value="2">Option 2</option>
    <optgroup label="Group 1">
        <option value="3">Option 3</option>
        <option value="4">Option 4</option>
    </optgroup>
    <optgroup label="Group 2">
        <option value="5">Option 5</option>
        <option value="6">Option 6</option>
    </optgroup>
</select>
//-- Javascript --
$('#dual-list-header').dualList({
    selectableListHeader: 'Selectable List',
    selectedListHeader: 'Selected List',
    filter: true
});

Select with HTML contents

Using data attribute data-wmdl-html you can use html contents. 
<!-- HTML -->
<select id="dual-list-html" multiple>
    <optgroup label="Editors">
        <option data-wmdl-html='<div class="wmdl-html-example1"><img src="https://picsum.photos/80/80?random=1"><div>Lorem ipsum dolor.</div></div>' value="1">Item 1</option>
        <option data-wmdl-html='<div class="wmdl-html-example1"><img src="https://picsum.photos/80/80?random=2"><div>Lorem ipsum dolor.</div></div>' value="2" selected>Item 2</option>
        <option data-wmdl-html='<div class="wmdl-html-example1"><img src="https://picsum.photos/80/80?random=3"><div>Lorem ipsum dolor.</div></div>' value="3" selected disabled>Item 3</option>
    </optgroup>
    <optgroup label="Subscribers">
        <option data-wmdl-html='<div class="wmdl-html-example1"><img src="https://picsum.photos/80/80?random=4"><div>Lorem ipsum dolor.</div></div>' value="4" selected>Item 4</option>
        <option data-wmdl-html='<div class="wmdl-html-example1"><img src="https://picsum.photos/80/80?random=5"><div>Lorem ipsum dolor.</div></div>' value="5">Item 5</option>
        <option data-wmdl-html='<div class="wmdl-html-example1"><img src="https://picsum.photos/80/80?random=6"><div>Lorem ipsum dolor.</div></div>' value="6">Item 6</option>
    </optgroup>
    <option data-wmdl-html='<div class="wmdl-html-example1"><img src="https://picsum.photos/80/80?random=7"><div>Lorem ipsum dolor.</div></div>' value="7" disabled>Item 7</option>
    <option data-wmdl-html='<div class="wmdl-html-example1"><img src="https://picsum.photos/80/80?random=8"><div>Lorem ipsum dolor.</div></div>' value="8" disabled>Item 8</option>
    <option data-wmdl-html='<div class="wmdl-html-example1"><img src="https://picsum.photos/80/80?random=9"><div>Lorem ipsum dolor.</div></div>' value="9">Item 9</option>
</select>
/*-- CSS --*/
.wmdl-html-example1{
    position: relative;
    display: block;
    padding: 5px;
}
    .wmdl-html-example1:after{
        clear: both;
        display: block;
        content: " ";
        height: 0;
    }
    .wmdl-html-example1 > img{
        height: 35px;
        width: 35px;
        float: left;
        margin-right: 5px;
        display: block;
    }
.wmdl-group > li > .html-example1{
    padding-left: 15px;
}                                        

//-- Javascript --
$('#dual-list-html').dualList({
    selectableListHeader: 'Available Users',
    selectedListHeader: 'Selected Users'
});

Select with Callback functions

<!-- HTML -->
<select id="dual-list-callback" multiple>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
    <option value="4">Option 4</option>
    <option value="5">Option 5</option>
    <option value="6">Option 6</option>
    ...
    ...
    <option value="100">Option 100</option>
</select>
//-- Javascript --
$('#dual-list-callback').dualList({
    selectableListHeader: 'Selectable Users',
    selectedListHeader: 'Selected Users',
    afterAdded: function(val){
        console.log(val);
    },
    afterRemoved: function(val){
        console.log(val);
    }
});
Logs :

Use of methods

Note: You must init the multiple select with $('selector').dualList(); before calling any of the following methods.

Get values using jQuery’s default val() method.

$('#dual-list-methods').val();

getValue method returns the values based on selection order.

$('#dual-list-methods').dualList(
    'getValue'
);

setValue method clears the old values and adds the new given value(s).

$('#dual-list-methods').dualList(
    'setValue', String|Array
);

addValue method adds new given value(s).

$('#dual-list-methods').dualList(
    'addValue', String|Array
);

removeValue method removes given value(s).

$('#dual-list-methods').dualList(
    'removeValue', String|Array
);

removeAll method removes everything from the selected list.

$('#dual-list-methods').dualList('removeAll');



Example – 1,2,3. No space between values.
Logs :

CSS Style

Complete lists of CSS Classes and Selectors used to apply the styles

.wmdl {

}

.wmdl:before {
     content: "\21C4";
}

.wmdl-select {
     
}

.wmdl-list {
     
}

.wmdl-list-options {
    
}

.wmdl-header {
     
}

.wmdl-filter {
     
}

.wmdl-filter-input {
     
}

.wmdl-filter-input::-webkit-input-placeholder {

}

.wmdl-filter-input::-moz-placeholder {

}

.wmdl-filter-input:-ms-input-placeholder {

}

.wmdl-filter-input::-ms-input-placeholder {

}

.wmdl-filter-input::placeholder {

}

.wmdl-filter-input:focus {
     
}

.wmdl-option {
    
}

.wmdl-option:hover {
     
}

.wmdl-option:not(.wmdl-html-option) {
    
}

.wmdl-group {
     
}

.wmdl-group-label {
     
}

.wmdl-group-label-clickable {

}

.wmdl-group .wmdl-option:not(.wmdl-html-option) {
     
}

.wmdl-has-group {
     
}

.wmdl-option-hide, .wmdl-group-hide {
     
}

.wmdl-disabled .wmdl-option,
.wmdl-disabled .wmdl-option:hover,
.wmdl-option-disabled,
.wmdl-option-disabled:hover,
.wmdl-group-disabled .wmdl-option,
.wmdl-group-disabled .wmdl-option:hover {
    
}

.wmdl-disabled .wmdl-group-label,
.wmdl-group-disabled .wmdl-group-label {
     
}