同位素 v2 网格 - 多个过滤器 - 隐藏空过滤器

我当前的同位素网格有两个下拉过滤器，用于对网格项目进行排序。第一个过滤器是菜单类型，第二个过滤器是饮料类型。然而，每种菜单类型并不包含所有饮料类型，因此当选择某些过滤器配置时，不会显示任何结果，这是正确的。但我想通过当用户选择第一个过滤器时阻止这种情况发生，第二个过滤器隐藏空类型。

当前过滤器的工作 Codepen：https://codepen.io/whitinggg/pen/zYGEaNb https://codepen.io/whitinggg/pen/zYGEaNb

这是我的旧过滤器代码：

// Select Filters
jQuery(function ($) {
    var $grid = $('.grid');
    var $selects = $('div#filterGroup select').change(function() {
        var selector = $selects.get().map(function(el) { // map the select elements ...
            return $(el).val(); // ... to an array of values
        }).join('') || '*'; // if joined array is empty-string, then default to a single '*'
        $grid.isotope({
            'filter': selector
        });
        return false;
    });

    $grid.imagesLoaded().progress( function() {
      $grid.isotope('layout');
    });
  });

我尝试将互联网上有关此主题的其他链接的代码更改为以下代码，但没有运气让它工作。

// Select Filters
jQuery(function ($) {
    var $grid = $('.grid');
    var $selects = $('div#filterGroup select').change(function() {
        var selector = $selects.get().map(function(el) { // map the select elements ...
            return $(el).val(); // ... to an array of values
        }).join('') || '*'; // if joined array is empty-string, then default to a single '*'
        $grid.isotope({
            'filter': selector
        });
        return false;
    });

//Hide Empty Filters
    var DROP = $('div#filterGroup select option:not([data-filter=""])');
    // list of all class in html
    var strall = ''; $('.grid-item').each(function(el){ strall += $(this).attr('class')  });
    // remove select if not in strall.. TODO : needs improvement, this is kind a hack
    DROP.each(function(el){
      var nowfilter = $(this).attr('data-filter').replace('.', ''); // co_kenya
      if( strall.indexOf( nowfilter ) == -1 ){
        console.log( 'this one is missing ' + nowfilter );
        $(this).remove();
      }
    });

    $grid.imagesLoaded().progress( function() {
      $grid.isotope('layout');
    });
  });

这可能吗？非常感谢任何帮助！

工作代码笔 https://codepen.io/codebling/pen/NWqyqKq

首先，为每个下拉列表添加一个ID，以便我们区分它们。

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

然后，为每个下拉列表添加一个更改侦听器。我们将查看菜单下拉更改侦听器的代码。

首先，从选定的下拉列表中获取类过滤器：

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

然后我们将选择与该类型匹配的所有网格项，以查看它们还有哪些其他类。这些其他类将是可用的类型

     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

最后，切换disabled属性在另一个下拉列表中，仅启用那些可用的。

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

应该可以做到这一点。类型下拉列表的更改处理程序是相同的，但引用相反的下拉列表。查看代码笔 https://codepen.io/codebling/pen/NWqyqKq了解详情。