Minimal Cascading Dropdown In jQuery - Select Relations

Select Relations is a lightweight jQuery cascading dropdown plugin that automatically filters <select> options based on what you choose in the previous dropdown.

The plugin provides a practical solution for web apps where dependent selections are needed. For example, in a form where users select their country, state, and city, Select Relations makes sure that only relevant states appear after a country is selected, and only relevant cities show up after a state is chosen. It is also useful in e-commerce websites or online stores where customers filter products based on categories like type, model, and features. 

See Also:

• 10 Best Cascading Dropdown Plugins In jQuery And Pure JavaScript

How to use it:

1. Download the plugin and include the select-relations.js script in your HTML file along with the latest jQuery library.

<!-- jQuery Is Required -->
<script src="/path/to/cdn/jquery.min.js"></script>

<!-- Select Relations JS -->
<script src="/path/to/select-relations.js"></script>

2. Use the data-pr attribute within each option to specify its parent dropdown and the corresponding value. For example, data-pr="countrySelect:USA" links an option to the "USA" option in the "countrySelect" dropdown.

<!-- Level 1 -->
<select id="countrySelect" class="select-relations">
  <option value="USA">USA</option>
  <option value="Canada">Canada</option>
</select>

<!-- Level 2 -->
<select id="citySelect" class="select-relations" data-sf-parent="countrySelect">
  <option value="New York" data-pr="countrySelect:USA">New York</option>
  <option value="Los Angeles" data-pr="countrySelect:USA">Los Angeles</option>
  <option value="Toronto" data-pr="countrySelect:Canada">Toronto</option>
  <option value="Vancouver" data-pr="countrySelect:Canada">Vancouver</option>
</select>

<!-- Level 3 -->
<select id="regionSelect" class="select-relations" data-sf-parent="citySelect">
  <option value="Manhattan" data-pr="citySelect:New York">Manhattan</option>
  <option value="Brooklyn" data-pr="citySelect:New York">Brooklyn</option>
  <option value="Hollywood" data-pr="citySelect:Los Angeles">Hollywood</option>
  <option value="Downtown" data-pr="citySelect:Los Angeles,citySelect:Toronto">Downtown</option>
  <option value="North Vancouver" data-pr="citySelect:Vancouver">North Vancouver</option>
  <option value="West Vancouver" data-pr="citySelect:Vancouver">West Vancouver</option>
</select>

Changelog:

2025-03-13

• Bugfix

---

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