<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 initDualListbox = function() {
// Dual Listbox
var listBoxes = $(".dual-listbox");
listBoxes.each(function() {
var $this = $(this);
// get titles
var availableTitle = ($this.attr("data-available-title") != null) ? $this.attr("data-available-title") : "Available options";
var selectedTitle = ($this.attr("data-selected-title") != null) ? $this.attr("data-selected-title") : "Selected options";
// get button labels
var addLabel = ($this.attr("data-add") != null) ? $this.attr("data-add") : "Add";
var removeLabel = ($this.attr("data-remove") != null) ? $this.attr("data-remove") : "Remove";
var addAllLabel = ($this.attr("data-add-all") != null) ? $this.attr("data-add-all") : "Add All";
var removeAllLabel = ($this.attr("data-remove-all") != null) ? $this.attr("data-remove-all") : "Remove All";
// get options
var options = [];
$this.children("option").each(function() {
var value = $(this).val();
var label = $(this).text();
options.push({
text: label,
value: value
});
});
// get search option
var search = ($this.attr("data-search") != null) ? $this.attr("data-search") : "";
// init dual listbox
var dualListBox = new DualListbox($this.get(0), {
addEvent: function(value) {
console.log(value);
},
removeEvent: function(value) {
console.log(value);
},
availableTitle: availableTitle,
selectedTitle: selectedTitle,
addButtonText: addLabel,
removeButtonText: removeLabel,
addAllButtonText: addAllLabel,
removeAllButtonText: removeAllLabel,
options: options,
});
if (search == "false") {
dualListBox.search.classList.add("dual-listbox__search--hidden");
}
});
};
return {
// public functions
init: function() {
initDualListbox();
},
};
}();
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 initDualListbox = function() {
// Dual Listbox
var listBoxes = $(".dual-listbox");
listBoxes.each(function() {
var $this = $(this);
// get titles
var availableTitle = ($this.attr("data-available-title") != null) ? $this.attr("data-available-title") : "Available options";
var selectedTitle = ($this.attr("data-selected-title") != null) ? $this.attr("data-selected-title") : "Selected options";
// get button labels
var addLabel = ($this.attr("data-add") != null) ? $this.attr("data-add") : "Add";
var removeLabel = ($this.attr("data-remove") != null) ? $this.attr("data-remove") : "Remove";
var addAllLabel = ($this.attr("data-add-all") != null) ? $this.attr("data-add-all") : "Add All";
var removeAllLabel = ($this.attr("data-remove-all") != null) ? $this.attr("data-remove-all") : "Remove All";
// get options
var options = [];
$this.children("option").each(function() {
var value = $(this).val();
var label = $(this).text();
options.push({
text: label,
value: value
});
});
// get search option
var search = ($this.attr("data-search") != null) ? $this.attr("data-search") : "";
// init dual listbox
var dualListBox = new DualListbox($this.get(0), {
addEvent: function(value) {
console.log(value);
},
removeEvent: function(value) {
console.log(value);
},
availableTitle: availableTitle,
selectedTitle: selectedTitle,
addButtonText: addLabel,
removeButtonText: removeLabel,
addAllButtonText: addAllLabel,
removeAllButtonText: removeAllLabel,
options: options,
});
if (search == "false") {
dualListBox.search.classList.add("dual-listbox__search--hidden");
}
});
};
return {
// public functions
init: function() {
initDualListbox();
},
};
}();
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 initDualListbox = function() {
// Dual Listbox
var listBoxes = $(".dual-listbox");
listBoxes.each(function() {
var $this = $(this);
// get titles
var availableTitle = ($this.attr("data-available-title") != null) ? $this.attr("data-available-title") : "Available options";
var selectedTitle = ($this.attr("data-selected-title") != null) ? $this.attr("data-selected-title") : "Selected options";
// get button labels
var addLabel = ($this.attr("data-add") != null) ? $this.attr("data-add") : "Add";
var removeLabel = ($this.attr("data-remove") != null) ? $this.attr("data-remove") : "Remove";
var addAllLabel = ($this.attr("data-add-all") != null) ? $this.attr("data-add-all") : "Add All";
var removeAllLabel = ($this.attr("data-remove-all") != null) ? $this.attr("data-remove-all") : "Remove All";
// get options
var options = [];
$this.children("option").each(function() {
var value = $(this).val();
var label = $(this).text();
options.push({
text: label,
value: value
});
});
// get search option
var search = ($this.attr("data-search") != null) ? $this.attr("data-search") : "";
// init dual listbox
var dualListBox = new DualListbox($this.get(0), {
addEvent: function(value) {
console.log(value);
},
removeEvent: function(value) {
console.log(value);
},
availableTitle: availableTitle,
selectedTitle: selectedTitle,
addButtonText: addLabel,
removeButtonText: removeLabel,
addAllButtonText: addAllLabel,
removeAllButtonText: removeAllLabel,
options: options,
});
if (search == "false") {
dualListBox.search.classList.add("dual-listbox__search--hidden");
}
});
};
return {
// public functions
init: function() {
initDualListbox();
},
};
}();
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 initDualListbox = function() {
// Dual Listbox
var listBoxes = $(".dual-listbox");
listBoxes.each(function() {
var $this = $(this);
// get titles
var availableTitle = ($this.attr("data-available-title") != null) ? $this.attr("data-available-title") : "Available options";
var selectedTitle = ($this.attr("data-selected-title") != null) ? $this.attr("data-selected-title") : "Selected options";
// get button labels
var addLabel = ($this.attr("data-add") != null) ? $this.attr("data-add") : "Add";
var removeLabel = ($this.attr("data-remove") != null) ? $this.attr("data-remove") : "Remove";
var addAllLabel = ($this.attr("data-add-all") != null) ? $this.attr("data-add-all") : "Add All";
var removeAllLabel = ($this.attr("data-remove-all") != null) ? $this.attr("data-remove-all") : "Remove All";
// get options
var options = [];
$this.children("option").each(function() {
var value = $(this).val();
var label = $(this).text();
options.push({
text: label,
value: value
});
});
// get search option
var search = ($this.attr("data-search") != null) ? $this.attr("data-search") : "";
// init dual listbox
var dualListBox = new DualListbox($this.get(0), {
addEvent: function(value) {
console.log(value);
},
removeEvent: function(value) {
console.log(value);
},
availableTitle: availableTitle,
selectedTitle: selectedTitle,
addButtonText: addLabel,
removeButtonText: removeLabel,
addAllButtonText: addAllLabel,
removeAllButtonText: removeAllLabel,
options: options,
});
if (search == "false") {
dualListBox.search.classList.add("dual-listbox__search--hidden");
}
});
};
return {
// public functions
init: function() {
initDualListbox();
},
};
}();
jQuery(document).ready(function() {
KTDualListbox.init();
});
