Logo

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

User Profile 12 messages

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