使用jQuery实现多下拉框筛选Div时独立筛选失效问题

你的代码核心问题是条件判断覆盖不全：当前仅处理了「两个筛选器都选all」和「两个筛选器都选中具体值且元素同时匹配」的场景，完全忽略了「其中一个筛选器选all，另一个选具体值」的情况，导致单个筛选器无法独立生效。

重新设计筛选逻辑：对每个元素，只要它满足当前选中的类别条件（若类别不是all则匹配对应值，否则跳过该条件），并且满足当前选中的类型条件（若类型不是all则匹配对应值，否则跳过该条件），就应该被显示。

修改后的代码如下：

$("select").change(function () {
  const $elementsToFilter = $("#filterable-elements div");
  const selectedCategory = $("#category-filter").val();
  const selectedType = $("#type-filter").val();

  // 先隐藏所有元素
  $elementsToFilter.hide();

  // 筛选符合条件的元素并统一显示
  $elementsToFilter.filter(function (index, element) {
    const $el = $(element);
    // 类别匹配规则：选all则自动匹配，否则匹配对应category
    const categoryMatch = selectedCategory === "all" || $el.data("category") === selectedCategory;
    // 类型匹配规则：选all则自动匹配，否则匹配对应type
    const typeMatch = selectedType === "all" || $el.data("type") === selectedType;
    
    // 两个条件同时满足则保留该元素
    return categoryMatch && typeMatch;
  }).show();
});

• 拆分每个筛选维度的匹配规则，单独处理all的情况：当某个筛选器选all时，该维度不对元素做限制，直接判定为匹配。
• 使用filter函数筛选出符合条件的元素集合后再统一调用show()，逻辑更清晰，避免在filter内部零散处理显示操作。
• 变量命名语义化，提升代码可读性。

内容的提问来源于stack exchange，提问作者Jay