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. All the data are stored in the JSON files and will be retrieved via AJAX requests.

Basic usage:

1. Load jQuery library and the jQuery cascading dropdown plugin at the end of the document so the page loads faster.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="jquery.cascading-drop-down.js"></script>

2. Create a set of select lists that will be converted into cascading dropdowns. Accepted HTML5 data attributes:

• data-group: indicates association of the select elements and helps distinguish between different groups where multiple blocks of cascading drop-downs are used
• data-target: indicates the select element that should be affected by the value selected from its originator
• data-url: url that needs to be called when the change event is triggered on the given select
• data-replacement: corresponding container with data-replacement-container - used for replacing additional content with each selection
• data-id:  the id of the element corresponds to the data-target of the previous element
• data-default-label: the default label for the first option item

<select
  name="skill"
  class="cascadingDropDown"

  data-group="skills"
  data-target="javascript"
  data-url="javascript.json"

  >
  <option value="">Select skills</option>
  <option value="1">Ruby</option>
  <option value="2">JavaScript</option>
  <option value="3">HTML5</option>
  <option value="4">CSS3</option>
  <option value="5">Python</option>
</select>

<select
  name="javascript"
  class="cascadingDropDown"

  data-group="skills"
  data-id="javascript"
  data-target="react"
  data-url="react.json"
  data-default-label="Select..."

  disabled
  >
</select>

3. The JSON structure should be like this:

{
  "success": true,
  "replacement": "Records filtered by the product category and any previous selection",
  "menu": [
    {
      "name": "jQuery",
      "value": "1"
    },
    {
      "name": "Angular",
      "value": "2"
    },
    {
      "name": "React",
      "value": "3"
    },
    {
      "name": "React Native",
      "value": "4"
    },
    {
      "name": "Vue.js",
      "value": "5"
    }
  ]
}

4. Initialize the plugin with default options.

$('.cascadingDropDown').ssdCascadingDropDown();

5. All default plugin settings.

$('.cascadingDropDown').ssdCascadingDropDown({

  // custom html data attributes
  attrDataGroup                   : 'group',
  attrDataId                      : 'id',
  attrDataUrl                     : 'url',
  attrDataTarget                  : 'target',
  attrDataDefaultLabel            : 'default-label',
  attrDataReplacement             : 'replacement',
  attrDataReplacementContainer    : 'replacement-container',
  attrDataReplacementDefault      : 'default-content',

  // class associated with the receiving container
  classReplacementContainer       : 'cascadingContainer',

  // json response key to indicate whether the call was successful (true) or not (false)
  indexSuccess                    : 'success',

  // json response key to store the error message
  indexError                      : 'error',

  // json response key to store the new menu items
  indexMenu                       : 'menu',

  // json response key to store the replacement for the content container
  indexReplacement                : 'replacement',

  // whether to run verification with instantiation
  verify                          : true,

  // callbacks
  nonFinalCallback                : function(trigger, props, data, self) {},
  finalCallback                   : function(trigger, props, data, self) {},
  errorCallback                   : function(message, data) { console.warn(message); }
  
});

Change log:

v1.4.3 (2017-06-26)

• JS update

---

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