10 Best Cascading Dropdown Plugin In jQuery And Pure JavaScript

by jQueryScript,

What is Cascading Dropdown?

A cascading (dependent, chained) dropdown is one of the most commonly used web component that dynamically populates a single dropdown select depending on the value selected in another select or a group of selects.

For example, you can create 2 dropdown lists (State and City) where only the cities of the selected states are visible.

In this blog post, we're going to introduce the 10 best and top-downloaded jQuery plugins and Vanilla JavaScript Libraries that help you implement the cascading dropdowns on the web app with minimal effort. I hope you like it and have fun!

Originally Published May 25 2019, updated Feb 12 2022

Table of contents:

jQuery Cascading Dropdown Plugins:

Cascading (Dependent) Dropdown List Plugin - jQuery Chained Selects

Chained Selects is a jQuery plugin for creating dependent dropdowns from JSON data that dynamically populates a set of select elements based on the previous selection.

Cascading (Dependent) Dropdown List Plugin - jQuery Chained Selects

[Demo] [Download]


Dynamic jQuery Cascading Dropdown Lists Plugin

A lightweight and easy-to-use jQuery plugin for cascading dropdown lists.

Dynamic jQuery Cascading Dropdown Lists Plugin

[Demo] [Download]


Multilevel Dependent Dropdown Plugin With jQuery - Dependent Dropdowns

A minimalist jQuery plugin to create multilevel dependent select dropdowns where options are derived depending on value selected in another select input.

Multilevel Dependent Dropdown Plugin With jQuery - Dependent Dropdowns

[Demo] [Download]


Basic Cascading Dropdown Plugin - jQuery FilterSelect

FilterSelect is an extremely simple cascading dropdown (aka dependent dropdown) plugin that automatically shows/hides select options depending on the value of other select elements.

Basic Cascading Dropdown Plugin - jQuery FilterSelect

[Demo] [Download]


Dynamic Dependent Dropdown List Plugin With jQuery - linkedSelect

linkedSelect is a jQuery plugin for creating dependent (cascading) dropdown lists that allow the user to select an option based on a previous selected option.

Dynamic Dependent Dropdown List Plugin With jQuery - linkedSelect

[Demo] [Download]


Easy Ajax-enabled Dependent Dropdown Plugin With jQuery - ssdCascadingDropDown

ssdCascadingDropDown is a jQuery plugin for creating dynamic cascading dropdowns which allow to show/hide select options depending on the changes of other select dropdowns.

Easy Ajax-enabled Dependent Dropdown Plugin With jQuery - ssdCascadingDropDown

[Demo] [Download]


Create Cascading Dropdown Menus With jQuery - ChainedSelect

A lightweight and easy-to-use jQuery plugin for creating cascading/chained dropdowns that dynamically populate corresponding select elements based on the previous selection.

Create Cascading Dropdown Menus With jQuery - ChainedSelect

[Demo] [Download]


Vanilla JS Cascading Dropdown Libraries:

Minimal Cascading Dropdown Menu In Pure JS – dependent-selects

dependent-selects is a minimal, unobtrusive JavaScript library for creating cascading drop-down menus.

Minimal Cascading Dropdown Menu In Pure JS – dependent-selects

[Demo] [Download]


Pure JavaScript Cascading Dropdown Library – cascadingLists

CascadingCascadingcaJust another JavaScript implementation of the ajax-enabled cascading dropdown where the options of current select depend on the changes of the items in the previous one.

Pure JavaScript Cascading Dropdown Library – cascadingLists

[Demo] [Download]


Cascading Autocomplete Dropdown In JavaScript – AutoCompleTree

A pure JavaScript autocomplete plugin that enables the user to select items from a cascading autocomplete dropdown just like a hierarchical tree.

Cascading Autocomplete Dropdown In JavaScript – AutoCompleTree

[Demo] [Download]


Conclusion:

Seeking more jQuery plugins or JavaScript libraries to create awesome cascading (dependent) dropdowns on the web & mobile? See jQuery Cascading Dropdown and JavaScript Cascading Dropdown sections for more details.

See also: