如何基于Div类实现下拉选择筛选功能？

我来帮你搞定这个过滤功能！其实只需要几行JavaScript就能轻松实现，思路非常直观：监听下拉菜单的选择变化，根据选中的值来控制对应Div的显示与隐藏。

完整实现代码 #

你可以直接把这段JavaScript代码加到你的页面里（比如放在</body>标签之前）：

<!-- 你的原表单代码保持不变 -->
<form action="/create_tasks/" name="form2" id="form2" method="post" class="row row-cols-lg-auto g-3 align-items-center"> 
  <input type="hidden" name="csrfmiddlewaretoken" value="F9Xrs4SIcjDS3yVMCH1hbAB1p3encpExp14ynCZV5jsDgjcD41qFoVeDn4wtpGr8"> 
  <div class="col-12"> 
    <label class="visually-hidden" for="inlineFormSelectPref">Preference</label> 
    <select class="form-select" id="inlineFormSelectPref"> 
      <option selected value='all'>All </option> 
      <option value='SQL'>SQL</option> 
      <option value='Apache Spark'>Apache Spark</option> 
      <option value='Python'>Python</option> 
      <option value='Linux'>Linux</option> 
    </select> 
  </div> 
  <div class="col-12"> 
    <button type="submit" class="btn btn-primary">filter</button> 
  </div> 
</form>

<!-- 你的原Div元素保持不变 -->
<div class="card mb-2 sh-10 sh-md-8 Python ">Python卡片1</div> 
<div class="card mb-2 sh-10 sh-md-8 Python ">Python卡片2</div>
<div class="card mb-2 sh-10 sh-md-8 SQL ">SQL卡片</div>
<div class="card mb-2 sh-10 sh-md-8 Linux ">Linux卡片</div>

<script>
// 获取下拉菜单元素
const selectElement = document.getElementById('inlineFormSelectPref');

// 监听下拉菜单的选择变化事件
selectElement.addEventListener('change', function() {
  const selectedValue = this.value;
  // 获取所有需要过滤的卡片元素
  const allCards = document.querySelectorAll('.card');

  if (selectedValue === 'all') {
    // 选择"All"时，显示所有卡片
    allCards.forEach(card => {
      card.style.display = ''; // 恢复默认显示状态
    });
  } else {
    // 选择具体选项时，先隐藏所有卡片，再显示对应类名的卡片
    allCards.forEach(card => {
      if (card.classList.contains(selectedValue)) {
        card.style.display = '';
      } else {
        card.style.display = 'none';
      }
    });
  }
});
</script>

关键逻辑解释 #

• 监听选择变化：通过addEventListener('change', ...)监听下拉菜单的选择变更，每次用户选新选项都会触发这个函数。
• 获取目标元素：用document.querySelectorAll('.card')拿到所有需要过滤的卡片Div。
• 过滤逻辑：
  • 当选中all时，遍历所有卡片，把它们的display样式恢复为默认（也就是显示）。
  • 当选中具体技术选项（比如Python）时，遍历所有卡片，判断每个卡片是否包含对应的类名，包含就显示，否则隐藏。

额外小提示 #

1. 注意你的<option>标签里，像Apache Spark这种带空格的值，要加上引号（我已经在代码里帮你补上了value='Apache Spark'，避免潜在的语法问题）。
2. 如果你的表单提交会刷新页面，记得要么阻止表单默认提交行为（因为我们用JS实现了前端过滤，不需要刷新），要么把JS逻辑放在页面加载完成后执行（比如用DOMContentLoaded事件包裹）。如果要阻止提交，可以给按钮加点击事件，或者在表单的submit事件里用event.preventDefault()。

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