jQuery Plugin To Create Dependent Select Boxes - Filter Select

Filter Select is a jQuery plugin for creating dependent select boxes where options are derived based on the value selected from other select element(s).

See also:

• jQuery Based Multi Select Enhancement Plugin - multiselectsplitter.js

How to use it:

1. Link to jQuery library and the jQuery Filter Select plugin's script:

<script src="://code.jquery.com/jquery.min.js"></script>
<script src="filterselect.js"></script>

2. Create select boxes and uses HTML5 data attributes to configure the dependent select options.

<select size='30' class='list filterSelect' data-target='select-family' id='select-city'>
  <option value='1' data-reference='1'>London</option>
  <option value='2' data-reference='2'>New York</option>
  <option value='3' data-reference='3'>Paris</option>
  <option value='4' data-reference='4'>Munchen</option>
  <option value='5' data-reference='5'>Amsterdam</option>
  ...
</select>

<select size='30' class='list filterSelect' data-target='select-name' id='select-family'>
  <option value='1'  data-reference='1' data-belongsto='1'>Bergnaum</option>
  <option value='2'  data-reference='2' data-belongsto='1'>Ankunding</option>
  <option value='3'  data-reference='3' data-belongsto='1'>Schultz</option>
  <option value='4'  data-reference='4' data-belongsto='1'>Gislason</option>
  <option value='5'  data-reference='5' data-belongsto='1'>Leffler</option>
  ...
</select>

<select size='30' class='list' id='select-name'>
  <option value='1005' data-reference='1005' data-belongsto='1'>Ana Bergnaum - London</option>
  <option value='1006' data-reference='1006' data-belongsto='1'>Ana Bergnaum - London</option>
  <option value='1007' data-reference='1007' data-belongsto='1'>Eda Bergnaum - London</option>
  <option value='1008' data-reference='1008' data-belongsto='1'>Willie Bergnaum - London</option>
  <option value='1009' data-reference='1009' data-belongsto='1'>Isabella Bergnaum - London</option>
</select>        

3. Call the function on these select elements and you're done.

$('.filterSelect').filterSelect();

Change log:

2016-11-05

• Adds feature: allow empty option

---

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