Basic Cascading Dropdown Plugin - jQuery FilterSelect

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.

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.

  • Publication date: 17.04.2019
  • Source