应用基于div类的过滤器

Question

我有一个表单-它允许用户从下拉列表中选择一个选项

<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 ">
</div>
<div class="card mb-2 sh-10 sh-md-8 Python ">
</div>

如果用户从下拉列表中选择一个值，我想只显示该类的div(例如，选择Python，只显示python div)。如果他们选择' all‘，我想要显示他们全部

我有一个游戏，有一些选项，但我不能让它工作。有谁能告诉我怎么走吗？

Answer 1

您可以在select字段中添加input事件侦听器。这将在您每次更改select中的选项时触发。当此事件触发时，只需读取div值并相应地显示select即可。

​

const select = document.getElementById('select');
const showSelected = name => {
    document.querySelectorAll('.form-option').forEach(card => {
        card.style.display = name === 'all' ? 'block' : 'none';
        if (name !== 'all' && card.classList.contains(name.replace(' ', '-'))) {
            card.style.display = 'block';
        }
    });
}

showSelected('all');
select.addEventListener('input', () => {
    showSelected(select.value);
});

<select id="select">
    <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 class="form-option SQL">SQL</div>
<div class="form-option Apache-Spark">Apache Spark</div>
<div class="form-option Python">Python</div>
<div class="form-option Linux">Linux</div>

​