Dual Listbox Dashboard
Default Dual Listbox
<select id="kt_dual_listbox_1" class="dual-listbox" multiple>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
<option value="6">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 demo1 = function () {
// Dual Listbox
var listBox = $('#kt_dual_listbox_1');
var $this = listBox;
// 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() {
demo1();
},
};
}();
jQuery(document).ready(function() {
KTDualListbox.init();
});
Dual Listbox with Custom Labels
<select id="kt_dual_listbox_2" class="dual-listbox" multiple
data-available-title="Source Options"
data-selected-title="Destination Options"
data-add="<i class='flaticon2-next'></i>"
data-remove="<i class='flaticon2-back'></i>"
data-add-all="<i class='flaticon2-fast-next'></i>"
data-remove-all="<i class='flaticon2-fast-back'></i>">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
<option value="6">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 demo2 = function () {
// Dual Listbox
var $this = $('#kt_dual_listbox_2');
// 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: "Source Options",
selectedTitle: "Destination Options",
addButtonText: "<i class='flaticon2-next'></i>",
removeButtonText: "<i class='flaticon2-back'></i>",
addAllButtonText: "<i class='flaticon2-fast-next'></i>",
removeAllButtonText: "<i class='flaticon2-fast-back'></i>",
options: options,
});
};
return {
// public functions
init: function() {
demo2();
},
};
}();
jQuery(document).ready(function() {
KTDualListbox.init();
});
Dual Listbox with Pre-Selection
<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();
});
Dual Listbox without Search
<select id="kt_dual_listbox_4" class="dual-listbox" data-search="false" multiple>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
<option value="6">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 demo4 = function () {
// Dual Listbox
var $this = $('#kt_dual_listbox_4');
// 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,
});
// hide search
dualListBox.search.classList.add('dual-listbox__search--hidden');
};
return {
// public functions
init: function() {
demo4();
},
};
}();
jQuery(document).ready(function() {
KTDualListbox.init();
});
