Logo
Dual Listbox is a pure JavaScript plugin that converts the normal select box into a searchable dual list box where the users are able to move options between two selection panels.
For more info please visit the plugin's Demo Pageor GitHub

Default Dual Listbox

Available options
  • Ten
  • Nine
  • Eight
  • Seven
  • Six
  • Five
  • Four
  • Three
  • Two
  • One
Selected options
    <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

    Source Options
    • Ten
    • Nine
    • Eight
    • Seven
    • Six
    • Five
    • Four
    • Three
    • Two
    • One
    Destination Options
      <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

      Available options
      • Ten
      • Nine
      • Eight
      • Seven
      • Five
      • Four
      • Three
      • One
      Selected options
      • Six
      • Two
      <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

      Available options
      • Ten
      • Nine
      • Eight
      • Seven
      • Six
      • Five
      • Four
      • Three
      • Two
      • One
      Selected options
        <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();
                            });

        Quick Actions finance & reports

        User Profile 15 messages

        Recent Notifications

        Important Notice

        Lorem Ipsum is simply dummy text of the printing and industry.

        System Update

        There are many variations of passages of Lorem Ipsum available.

        Server Maintenance

        Contrary to popular belief, Lorem Ipsum is not simply random text.

        DB Migration

        If you are going to use a passage of Lorem Ipsum, you need.

        System Messages
        09:30 AM

        To start a blog, think of a topic about and first brainstorm ways to write details

        2:45 PM

        To start a blog, think of a topic about and first brainstorm ways to write details

        3:12 PM

        To start a blog, think of a topic about and first brainstorm ways to write details

        7:05 PM

        To start a blog, think of a topic about and first brainstorm ways to write details

        Notifications
        Pic
        Marcus Smart UI/UX, Art Director
        +65%
        AH
        Andreas Hawks Python Developer
        +23%
        SC
        Sarah Connor HTML, CSS. jQuery
        -34%
        Pic
        Amanda Harden UI/UX, Art Director
        +72%
        SR
        Sean Robbins UI/UX, Art Director
        +65%
        JT
        Jason Tatum ASP.NET Developer
        +139%

        Privacy Settings:

        After you log in, you will be asked for additional information to confirm your identity.

        Security Settings:

        After you log in, you will be asked for additional information to confirm your identity. For extra security, this requires you to confirm your email. Learn more.

        Select A Demo

        Demo 1
        Demo 2
        Demo 3
        Demo 4
        Demo 5
        Demo 6
        Demo 7
        Demo 8
        Demo 9