<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();
});
<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();
});
<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();
});
<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();
});
Lorem Ipsum is simply dummy text of the printing and industry.
There are many variations of passages of Lorem Ipsum available.
Contrary to popular belief, Lorem Ipsum is not simply random text.
If you are going to use a passage of Lorem Ipsum, you need.
To start a blog, think of a topic about and first brainstorm ways to write details
To start a blog, think of a topic about and first brainstorm ways to write details
To start a blog, think of a topic about and first brainstorm ways to write details
To start a blog, think of a topic about and first brainstorm ways to write details
