Multilevel Dependent Dropdown Plugin With jQuery - Dependent Dropdowns

A minimalist jQuery plugin to create multilevel dependent select dropdowns where options are derived depending on value selected in another select input.

How to use it:

1. Load the jQuery Dependent Dropdowns plugin's script after jQuery library.

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="script.js"></script>

2. Create a group of select elements with 'first', 'second' and 'third' IDs.

<label for="first">First Level Dropdown</label>
<select id="first" class="form-control" role="listbox">
  <option value="0" selected="selected">Select Option</option>
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
  <option value="4">Option 4</option>
</select>

<label for="second">Second Level Dropdown</label>
<select id="second" class="form-control" role="listbox" disabled="disabled">
  <option value="0" selected="selected">Select Option</option>
</select>

<label for="third">Third Level Dropdown</label>
<select  id="third" class="form-control" role="listbox" disabled="disabled">
  <option value="0" selected="selected">Select Option</option>
</select>

3. That's it. The plugin will automatically convert the select elements into dependent dropdowns.

Change log:

2015-12-20

• JS update

---

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