Logo
Stockholm-icons / Layout / Layout-4-blocks Created with Sketch.
Stockholm-icons / Communication / Chat6 Created with Sketch.
Logo
Stockholm-icons / Layout / Layout-polygon Created with Figma. Stockholm-icons / Tools / Compass Created with Sketch.
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 Page or GitHub

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 15 messages

Recent Notifications
Stockholm-icons / Layout / Layout-polygon Created with Figma. Stockholm-icons / Files / File-done Created with Sketch.

Important Notice

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

Stockholm-icons / Layout / Layout-polygon Created with Figma. Stockholm-icons / Design / Pen&ruller Created with Sketch.

System Update

There are many variations of passages of Lorem Ipsum available.

Stockholm-icons / Layout / Layout-polygon Created with Figma. Stockholm-icons / General / Thunder-move Created with Sketch.

Server Maintenance

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

Stockholm-icons / Layout / Layout-polygon Created with Figma. Stockholm-icons / Home / Alarm-clock Created with Sketch.

DB Migration

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

System Messages
Stockholm-icons / Communication / Group-chat Created with Sketch.
09:30 AM

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

Stockholm-icons / General / Attachment2 Created with Sketch.
2:45 PM

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

Stockholm-icons / Home / Library Created with Sketch.
3:12 PM

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

Stockholm-icons / Communication / Add-user Created with Sketch.
7:05 PM

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

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.

Stockholm-icons / Navigation / Up-2 Created with Sketch.

Select A Demo

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