10 Best Dual List Box Plugins In JavaScript

by jQueryScript,

What Is Dual List Box?

Dual List Box is a UI design pattern used to replace the multiple select for better user experience.

In general, a Dual List Box component allows the users to move a single or multiple items between 2 side-by-side select boxes via drag'n'drop or button-based controls.

The Best Dual List Box Plugin

Here are the 10 best jQuery and Vanilla JavaScript Dual List Box plugins that provide an advanced, user-friendly multiple select experiences on your web app. Have fun.

Table of contents:

jQuery Dual List Box Plugins:

Two-side Multi Select Plugin with jQuery - multiselect.js

A jQuery & Bootstrap based two-side multi select plugin that the users can move items between two boxes by selecting items(s) and clicking on arrow buttons.

Two-side Multi Select Plugin with jQuery - multiselect.js

[Demo] [Download]


Responsive jQuery Dual Select Boxes For Bootstrap 4 - Bootstrap Dual Listbox

Bootstrap Dual Listbox is a responsive and touch enabled jQuery dual select boxes plugin for Bootstrap that allows you to move items between 2 list boxes.

Responsive jQuery Dual Select Boxes For Bootstrap 4 - Bootstrap Dual Listbox

[Demo] [Download]


Efficient Dual List Box Plugin with jQuery and Bootstrap

Just another jQuery & Bootstrap based dual list box plugin that is easy to implement and has the ability to load huge data from a JSON file using Ajax.

Efficient Dual List Box Plugin with jQuery and Bootstrap

[Demo] [Download]


jQuery Plugin For Side-By-Side Multi Items Pick List

jQuery picklist is an easy-to-use and powerful jQuery plugin that turns a standard multiple selection box into a side-by-side pick list which supports for easily and quickly selecting or removing multiple items.

jQuery Plugin For Side-By-Side Multi Items Pick List

[Demo] [Download]


Lightweight Multi-select Combo Box Plugin For jQuery - SelectListActions

SelectListActions is a lightweight jQuery plugin for creating a combo box control which allows the user to swap items between two or more select lists.

Lightweight Multi-select Combo Box Plugin For jQuery - SelectListActions

[Demo] [Download]


Groupable & Searchable Dual Listbox Plugin - jQuery Transfer

Transfer is a powerful, dynamic, groupable & searchable Dual Listbox plugin where the users are able to move groups and items between 2 side-by-side list boxes

Groupable & Searchable Dual Listbox Plugin - jQuery Transfer

[Demo] [Download]


Lightweight jQuery Dual List Box Plugin - listSwap

listSwap is a simple lightweight jQuery plugin to create a dual list box widget that allows the visitor to swap items between two associated select lists.

Lightweight jQuery Dual List Box Plugin - listSwap

[Demo] [Download]


Easy Filterable Dual List Box Plugin - jQuery DualSelectList

Yet another jQuery plugin for creating a multi-selectable dual list box where the users are able to move items between two filterable lists.

Easy Filterable Dual List Box Plugin - jQuery DualSelectList

[Demo] [Download]


Vanilla JavaScript Dual List Box Plugins:

Pure JS Dual List Box Component

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.

Pure JS Dual List Box Component

[Demo] [Download]


Create Dual List Box With Pure JavaScript – multi.js

multi.js is a lightweight JavaScript plugin that transforms the normal multiple select into a filterable/searchable dual list box interface for easier option selection. You can switch options between 2 select boxes by clicking.

Create Dual List Box With Pure JavaScript – multi.js

[Demo] [Download]


Conclusion:

Want more jQuery plugins or JavaScript libraries to create awesome Dual List Box on the web & mobile? Check out the jQuery Dual List Box and JavaScript Dual List Box sections.

See Also: