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.

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="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
        crossorigin="anonymous">
</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
});

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