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

Notifications 24 New

Quick Actions finance & reports

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