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 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();
                            });
       

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 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();
                            });
       

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 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();
                            });
       

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 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();
                            });
       

Notifications 24 New

User Profile 12 messages

James Jones
Application Developer
Recent Notifications
Another purpose persuade Due in 2 Days
+28%
Would be to people Due in 2 Days
+50%
-27%
The best product Due in 2 Days
+8%

Select A Demo