10 Best Dual List Box Plugins In JavaScript (2023 Update)

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.

Originally Published Oct 17 2019, updated Jan 18 2023

Table of contents:

jQuery Dual List Box Plugins:

Searchable Dual List Box Plugin With jQuery - multi.js

A lightweight JavaScript library that transforms the normal multiple select list into a searchable dual list box interface for easier option selection.

jQuery Plugin To Select Multiple Items From A Dropdown List - multiSelect

[Demo] [Download]


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

A jQuery plugin that converts a multiple select into two-side select boxes so 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]


jQuery Plugin For Drag and Drop Multi-Select List Box - fieldChooser

A jQuery & jQuery UI component for creating a drag'n'drop multi-selection list box with ease. The plugin allows you to move the currently selected items to another container by using the drag and drop method.

jQuery Plugin For Drag and Drop Multi-Select List Box - fieldChooser

[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]


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]


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]


Dynamic Dual List Box Plugin - jQuery Multi Selection

A lightweight and simple-to-use jQuery multiple selection (dual list box) plugin which enables the user to move options between two select boxes a button-based interface.

Dynamic Dual List Box Plugin - jQuery Multi Selection

[Demo] [Download]


Vanilla JavaScript Dual List Box Plugins:

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]


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]


Dynamic Dual List Picker In Pure JavaScript – list-picker

A dual list box style picker component which allows you to move any number of items between two html lists using mouse click or touch tap.

Dynamic Dual List Picker In Pure JavaScript – list-picker

[Demo] [Download]


More Resources:

Seeking more jQuery plugins or JavaScript libraries to create awesome Dual List Box on the web & mobile? See jQuery Dual List Box and JavaScript Dual List Box sections for more details.

See Also: