如何使用自定义select下拉框筛选匹配的列表项？

问题原因 #

你当前的筛选逻辑无法生效，核心是两个问题：

• 你使用的是自定义模拟的下拉组件，不是原生<select>表单元素，只有原生表单元素才会触发change事件，绑定在#filter（普通div元素）上的change监听不会触发
• <span>标签的value是非标准属性，无法直接通过event.target.value读取，需要通过getAttribute或者自定义data-*属性获取

修改后的代码 #

JS代码（直接替换原有JS即可生效） #

// 下拉框交互逻辑
for (const dropdown of document.querySelectorAll(".custom__select-wrapper")) {
  dropdown.addEventListener("click", function () {
    this.querySelector(".custom__select").classList.toggle("open");
  });
}

// 提前获取所有列表项，避免重复查询DOM
const articles = document.querySelectorAll(".article");
for (const option of document.querySelectorAll(".custom__option")) {
  option.addEventListener("click", function () {
    if (!this.classList.contains("selected")) {
      // 原有选中态切换逻辑
      this.parentNode
        .querySelector(".custom__option.selected")
        .classList.remove("selected");
      this.classList.add("selected");
      this.closest(".custom__select").querySelector(
        ".custom__select-trigger span"
      ).textContent = this.textContent;

      // 新增筛选逻辑
      const filterValue = this.getAttribute("value");
      if (filterValue && filterValue !== "") {
        articles.forEach(article => {
          article.dataset.itemName === filterValue 
            ? article.classList.remove("hidden-item") 
            : article.classList.add("hidden-item");
        });
      } else {
        // 选中All选项时展示全部列表
        articles.forEach(article => article.classList.remove("hidden-item"));
      }
    }
  });
}

// 点击页面其他位置关闭下拉
window.addEventListener("click", function (e) {
  for (const select of document.querySelectorAll(".custom__select")) {
    if (!select.contains(e.target)) {
      select.classList.remove("open");
    }
  }
});

HTML可选优化（建议修改，避免非标准属性问题） #

把span上的非标准value属性替换为标准的data-value属性：

<div class="custom__options" id="filter">
  <span class="custom__option selected" data-value="">All</span>
  <span class="custom__option" data-value="news">News and Media</span>
  <span class="custom__option" data-value="analysis">Analysis</span>
  <span class="custom__option" data-value="press">Press Releases</span>
</div>

如果做了上述HTML修改，只需要把JS中获取筛选值的代码对应调整即可：

const filterValue = this.dataset.value;

改动说明 #

• 移除了原来绑定在#filter上的无效change事件监听
• 将筛选逻辑直接整合到自定义选项的点击事件中，点击选项时实时执行筛选
• 兼容了All选项的全量展示逻辑，原有CSS代码无需调整即可正常使用

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