Minimal Cascading (Dependent) Dropdown Plugin - jQuery Subselect

Subselect is a lightweight cascading (dependent) dropdown jQuery plugin that has the ability to filter a select box depending on the value selected in another one.

It can be used for organizing hierarchical data such as country-state-city relationships, product categories and subcategories, or any other situation where a user's choice in one dropdown menu directly influences the available options in another.

See Also:

• 10 Best Cascading Dropdown Plugin In jQuery And Pure JavaScript

How to use it:

1. Create two linked select boxes and categorize your options using the data-parent-value attribute as follows:

<!-- Parent Select --><select class="form-control" id="parent" name="parent">
  <option selected="selected" value="">Please select..</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>

<!-- Dependent Select -->
<div class="form-group" data-related-sub-select="dependent">
  <label for="dependent" data-related-sub-select="dependent">Sub Category</label>
  <select class="form-control" id="dependent" name="dependent" data-parent-id="parent">
    <option selected="selected" value="">Please select..</option>
    <option data-parent-value="1" value="1">Option 1_1</option>
    <option data-parent-value="1" value="2">Option 1_2</option>
    <option data-parent-value="2" value="3">Option 2_1</option>
    <option data-parent-value="2" value="4">Option 2_2</option>
    <option data-parent-value="3" value="5">Option 3_1</option>
    <option data-parent-value="3" value="6">Option 3_2</option>
    <option data-parent-value="4" value="7">Option 4_1</option>
    <option data-parent-value="4" value="8">Option 4_2</option>
  </select>
</div>

2. Load the jQuery Subselect plugin's files in the document.

<script src="/path/to/cdn/jquery.slim.min.js"></script>
<link rel="stylesheet" href="css/jquery.subselect.style.css" />
<script src="scripts/jquery.subselect.min.js"></script>

3. Initialize the plugin and done.

$('select[data-parent-id]').initSubSelectSource();
$('select[data-parent-id]').onSelectChange();
// On change event
$('select[data-parent-id]').change(function () {
  $('select[data-parent-id]').onSelectChange();
});

---

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