Two selects, one has filters, the options on the other select are hidden when the filter changes.

filter_on_select.html

<script>
// change the filter_select to filter items in the target select
filter_select = document.getElementById('filter_select_id');
filter_select.onchange = function (ev) {
 
  var target_select = document.getElementById('target_select_id');
  for (i = 0; i < target_select.children.length; i++)
  {
    option = target_select.children[i];
    $(option).show(); // show option if previously hidden from selecting another filter
    
    if (this.value != '') // show all if no filter is selected
    {
      if (option.getAttribute('data-filter').indexOf(this.value) == -1) // option doesnt match filter -> hide
      {
        $(option).hide();
      }
    }
  };
};
</script>

<!-- change this to filter options on the target -->
<select name="filter" id="filter_select_id">
  <option data-filter="a">a</option>
  <option data-filter="b">b</option>
  <option data-filter="c">c</option>
  <option data-filter="d">d</option>
  <option data-filter="e">e</option>
  <option data-filter="f">f</option>
  <option data-filter="g">g</option>
  <option data-filter="h">h</option>
  <option data-filter="i">i</option>
</select>
    
<select name="target" id="target_select_id">
  <option data-filter="a|b|c">abc</option>
  <option data-filter="d|e|f">def</option>
  <option data-filter="g|h|i">ghi</option>
</select>