<select id="kt_dual_listbox_3" class="dual-listbox" multiple>
<option value="1">One</option>
<option value="2" selected>Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
<option value="6" selected>Six</option>
<option value="7">Seven</option>
<option value="8">Eight</option>
<option value="9">Nine</option>
<option value="10">Ten</option>
</select>
// Class definition
var KTDualListbox = function() {
// Private functions
var demo3 = function () {
// Dual Listbox
var $this = $('#kt_dual_listbox_3');
// get options
var options = [];
$this.children('option').each(function () {
var value = $(this).val();
var label = $(this).text();
options.push({
text: label,
value: value
});
});
// init dual listbox
var dualListBox = new DualListbox($this.get(0), {
addEvent: function (value) {
console.log(value);
},
removeEvent: function (value) {
console.log(value);
},
availableTitle: 'Available options',
selectedTitle: 'Selected options',
addButtonText: 'Add',
removeButtonText: 'Remove',
addAllButtonText: 'Add All',
removeAllButtonText: 'Remove All',
options: options,
});
};
return {
// public functions
init: function() {
demo3();
},
};
}();
jQuery(document).ready(function() {
KTDualListbox.init();
});