如何使用下拉选择列表对项目列表进行筛选，仅显示选中的对应项

1 基础代码修正 #

现有代码存在样式类名不匹配的问题，先对齐保证基础样式生效，同时给待筛选的列表添加唯一类名方便DOM查询：

修正后的CSS代码 #

/* 仅修改按钮选择器和原有样式对齐，其他样式保持不变 */
.dropSortbtn2 {
  background-color: #04AA6D;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {
  background-color: #ddd;
}

.dropdown:hover .dropdown-content {
  display: block;
}

.dropdown:hover .dropSortbtn2 {
  background-color: #3e8e41;
}

补充标识后的列表HTML #

<!-- 给ul添加类名food-list -->
<ul class="food-list">
  <li>Tomato</li>
  <li>APPle</li>
  <li>Broccoli</li>
  <li>Carrot</li>
  <li>Tomato</li>
  <li>Broccoli</li>
</ul>

2 高效筛选逻辑实现 #

针对下拉选项和列表项数量大的场景，采用预缓存DOM、预构建映射表的方案提升性能，避免每次点击都全量遍历查询DOM：

// 页面加载完成后执行逻辑
document.addEventListener('DOMContentLoaded', () => {
  // 预缓存所有待筛选列表项，仅查询一次DOM
  const allFoodItems = document.querySelectorAll('.food-list li')
  // 预构建筛选值到对应列表项的映射表，仅生成一次
  const filterMap = new Map()
  allFoodItems.forEach(item => {
    const foodName = item.textContent.trim()
    if (!filterMap.has(foodName)) {
      filterMap.set(foodName, [])
    }
    filterMap.get(foodName).push(item)
  })

  // 给所有下拉选项绑定点击事件
  document.querySelectorAll('.dropdown-content a').forEach(option => {
    option.addEventListener('click', (e) => {
      // 阻止a标签默认跳转行为
      e.preventDefault()
      // 获取当前选中的筛选值
      const selectedFood = option.textContent.trim()

      // 先隐藏所有列表项
      allFoodItems.forEach(item => item.style.display = 'none')
      // 仅显示匹配的列表项
      filterMap.get(selectedFood)?.forEach(item => item.style.display = 'list-item')

      // 可选：将下拉按钮文本替换为当前选中的项，提升用户体验
      document.querySelector('.dropSortbtn2').firstChild.textContent = ` ${selectedFood} `
    })
  })
})

3 可选优化 #

如果需要支持显示所有项的功能，只需要在下拉列表中新增一个「全部」选项，点击时直接将所有列表项设置为显示即可。

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