Dynamic jQuery Cascading Dropdown Lists Plugin

File Size: 58.5 KB
Views Total: 69492
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Dynamic jQuery Cascading Dropdown Lists Plugin

A lightweight and easy-to-use jQuery plugin for cascading dropdown lists. The basic usage of this plugin is to create a group of dropdown lists that the second dropdown is dependent on the first dropdown having a value, and the third dropdown is dependent on either the first or second one having a value.

See also:

Basic Usage:

1. Create the html for the cascading dropdown lists

<div id="example1" class="bs-docs-example">
<select class="step1">
<option value="">Please select an option</option>
<select class="step2">
<option value="">Please select an option</option>
<select class="step3">
<option value="">Please select an option</option>

2. Include jQuery library and jQuery Cascading Dropdown plugin on the page

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.js"></script> 
<script type="text/javascript" src="jquery.cascadingdropdown.js"></script> 

3. Include MockJax.js to mock ajax requests

<script type="text/javascript" src="jquery.mockjax.js"></script> 

4. The javascript

  selectBoxes: [
  selector: '.step1'
  selector: '.step2',
  requires: ['.step1']
  selector: '.step3',
  requires: ['.step1', '.step2']

5. All possible options.


  // use POST when sending Ajax request
  usePost: false,

  // stringify (JSON.stringify) dropdown data for Ajax requests
  useJson: false,

  // overrides the default value for the class name applied to the dropdown element during Ajax calls
  isLoadingClassName: 'cascading-dropdown-loading',

  // array of dropdown objects
  selectBoxes: [{
    selector: '.select1',

  // selector for select box inside parent container. 
  selector: '.selectbox1',
  // source for dropdown items. 
  // This can be a URL pointing to the web service that provides the dropdown items, or a function that manually handles the Ajax request and response.
  source: '/api/CompanyInfo/GetCountries',

  // array of dropdown selectors required to have value before this dropdown is enabled.
  requires: ['.selectbox1'],

  // Required dropdown value parameter name used in Ajax requests. 
  // If this value is not set, the plugin will use the dropdown name attribute.
  // If neither this parameter nor the name attribute is set, this dropdown will not be taken into account in any Ajax request.
  paramName: 'countryId',

  // sets the default dropdown item on initialisation. 
  // The value can be a the value of the targeted dropdown item, or its index value.
  selected: 'red',

  // triggered when the plugin is completely initialised
  // The event handler will be provided with the event object, and an object containing the current values of all the dropdowns in the group.
  onReady: function(event, allValues) { },

  // triggered whenever the value of a dropdown in a particular group is changed. 
  // The event handler will be provided with the event object, and an object containing the current values of all the dropdowns in the group.
  onChange: function(event, allValues) { }


6. API methods.



v1.2.9 (2019-11-01)

  • Minor fixes



  • Added .destroy() method.


  • Added multiple pre-select


  • bugs fixed.


  • bugs fixed.


  • bug fixed.


  • bug fixed.

This awesome jQuery plugin is developed by dnasir. For more Advanced Usages, please check the demo page or visit the official website.