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.

How to use it:

1. Create a normal empty select element on the webpage.

<select id="example"></select>

2. Put jQuery library and the JavaScript file jquery.chained.selects.js right before the </body> tag.

<script src="/path/to/cdn/jquery.slim.min.js">
</script>
<script src="jquery.chained.selects.js"></script>

3. Prepare your hierarchical data in the JSON objects.

{
  "JavaScript": {
    "jQuery": {
      "1": "jQuery UI"
    },
    "React": {
      "2": "React Native"
    }
  },
  "HTML": {
    "XML": {
      "HTML5": {
        "3": "HTML5/CSS3"
      }
    }
  },
  "More": {
    "AA": {
      "4": "AAA"
    },
    "AB": {
      "5": "ABA"
    },
    "AC": {
      "ABC": {
        "6": "ABCA",
        "7": "ABCB"
      }
    }
  }
}

4. Activate the plugin and done.

$("#example").chainedSelects({
  data: myData
});

5. Customize the placeholder for the select elements.

$("#example").chainedSelects({
  data: myData,
  placeholder:'jQueryScript'
});

6. Set the maximum number of levels of hierarchical data (Default: 10).

$("#example").chainedSelects({
  data: myData,
  maxLevels: 5
});

7. Enable/disable the debugg mode (Default: false).

$("#example").chainedSelects({
  data: myData,
  loggingEnabled: true
});

8. Set the pre-selected option.

$("#example").chainedSelects({
  data: myData,
  selectedKey: 3
});

9. Set the pre-selected option by path.

$("#example").chainedSelects({
  defaultPath: ["A", "AB"]
});

10. Determine whether to sort the list by value..

$("#example").chainedSelects({
  sortByValue: true
});

11. Execute a function on selectection change.

$("#example").chainedSelects({
  onSelectedCallback: function(data){
    // do something
  }
});

12. Append a CSS class to the selected option. Default: false.

$("#example").chainedSelects({
  selectCssClass: 'yourClass'
});

13. Determine whether to allow automatic pre-selection of option if there is only single one. Default: false.

$("#example").chainedSelects({
  sautoSelectSingleOptions: true
});

14. API methods.

// Enable logging. Default: true
$("#example").data("chainedSelects").setLoggingEnabled(boolean);

// Change current selected key (integer or string, for either specific choice or category)
$("#example").data("chainedSelects").changeSelectedKey(newSelectedKey);

Changelog:

v2.1.1 (2023-09-13)

• Bugfix

v2.1.0 (2020-09-25)

• Added autoSelectSingleOptions option that allow automatic pre-selection of option if there is only single one (works recursively)

v2.0.3 (2020-05-25)

• fixed pre-selecting first option when no placeholder is provided

v2.0.2 (2020-04-27)

• Extra CSS class

v2.0.1 (2019-09-09)

• empty placeholder update

v2.0.0 (2019-07-09)

• Code refactor.

v1.0.4 (2019-06-21)

• Incorrect default value for sortByValue fixed

v1.0.3 (2018-12-14)

• user callback on selectection change.

2018-12-07

• hotfix sorting

2018-11-08

• Added an option to pre-select option by name/value or path

---

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