Basic Cascading Dropdown Plugin - jQuery FilterSelect

FilterSelect is an extremely simple cascading dropdown (aka dependent dropdown) plugin that automatically shows/hides select options depending on the value of other select elements. Ideal for Country, State, City and Zip selection UI.

How to use it:

1. Just include the JavaScript file selectFilter.min.js after jQuery library and we're ready to go.

<script src="https://code.jquery.com/jquery-1.12.4.min.js" 
        integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" 
        crossorigin="anonymous">
</script>
<script src="selectFilter.min.js"></script>

2. Add the CSS class selectFilter to the dropdown selects and specify on which conditions to check using the following data attributes:

• data-target: target dropdown
• data-ref: show/hide options based on this value
• data-belong: show/hide options based on this value

<!-- Country -->
<select data-target="secondList" class="firstList selectFilter">
  <option value="-1">Country</option>
  <option data-ref="one">First One</option>
  <option data-ref="two">First Two</option>
  <option data-ref="three">First Three</option>
</select>

<!-- State -->
<select data-target="thirdList" class="secondList selectFilter">
  <option value="-1">State</option>
  <option data-ref="A" data-belong="one" >First One</option>
  <option data-ref="B" data-belong="two">First Two</option>
  <option data-ref="C" data-belong="three">First Three</option>
  <option data-ref="D" data-belong="one">Second One</option>
  <option data-ref="E" data-belong="two">Second Two</option>
  <option data-ref="F" data-belong="three">Second Three</option>
</select>

<!-- City -->
<select class="thirdList selectFilter">
  <option value="-1">City</option>
  <option data-belong="A" >First One</option>
  <option data-belong="B">First Two</option>
  <option data-belong="C">First Three</option>
  <option data-belong="D">Second One</option>
  <option data-belong="E">Second Two</option>
  <option data-belong="F">Second Three</option>
  <option data-belong="A">Third One</option>
  <option data-belong="B">Third Two</option>
  <option data-belong="C">Third Three</option>
</select>

---

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