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:

• Best Cascading Dropdown Plugin In jQuery And Pure JavaScript

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>
<option>Option1</option>
<option>Option2</option>
<option>Option3</option>
<option>Option4</option>
</select>
<select class="step2">
<option value="">Please select an option</option>
<option>Option5</option>
<option>Option6</option>
<option>Option7</option>
<option>Option8</option>
</select>
<select class="step3">
<option value="">Please select an option</option>
<option>Option9</option>
<option>Option10</option>
<option>Option11</option>
<option>Option12</option>
</select>
</div>

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

$('#example1').cascadingDropdown({
  selectBoxes: [
  {
  selector: '.step1'
  },
  {
  selector: '.step2',
  requires: ['.step1']
  },
  {
  selector: '.step3',
  requires: ['.step1', '.step2']
  }
  ]
});

5. All possible options.

$('#example1').cascadingDropdown({

  // 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.

$('#example1').cascadingDropdown('destroy');

Changelog:

v1.2.9 (2019-11-01)

• Minor fixes

2019-05-30

• dist update

2016-03-07

• Added .destroy() method.

2016-01-25

• Added multiple pre-select

2016-01-24

• bugs fixed.

2014-06-15

• bugs fixed.

2014-03-04

• bug fixed.

2014-01-06

• bug fixed.

---

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