Isotope V2 Grid - Multiple Filters - Hide Empty Filters

My current isotope grid has two dropdown filters that sort the grid items. The first filter is menu type, and the second filter is drink type. Each menu type however does not conta

Solution 1:

Working codepen

First, add an ID to each drop-down so that we can distinguish them.

<select id="menu-selector"class="filter option-set" data-filter-group="menu">
[...]
<select id="type-selector"class="filter option-set" data-filter-group="categories">

Then, for each drop-down, add a change listener. We'll look at the code for the menu drop-down change listener.

First, get the class filter from the selected drop-down:

 $('#menu-selector').change(function() {
     var selectedClass = $('#menu-selector option:selected').attr('value');

Then we're going to select all of the grid items matching that type, to see what other classes they have. These other classes will be the available types

var availableTypes = $(`.grid-item${selectedClass}`)
       .toArray()
       .flatMap(div =>Array.from(div.classList.values())) //get all of the classes
       .filter(i => !['grid-item', selectedClass.substring(1)].includes(i));  //eliminate useless ones

Last, toggle the disabled property on the other drop-down, enabling only those that are available.

     $('#type-selector option')
         .each( (i,el) => $(el).prop('disabled', el.value != ""  && !availableTypes.includes(el.value.substring(1))));

That should do it. The change handler for the type drop-down is the same but references the opposite drop-down. Check the codepen for details.