应用基于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，只显示Pythondiv(。如果他们选择"全部"，我想向他们显示所有

我有一个剧本，有一些选择，但我无法使它发挥作用。有人能给我指正确的方向吗？

Answer 1

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

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>