首先,我是 JS 新手,尝试使用 select 标签制作一些列表。
具体来说,我想制作一个函数,如果我在多个选项中选择“2014”选项,则图表将仅显示一个类名为“2014”的 div,否则将不会显示。但不知怎的,它并没有像我预期的那样工作,有人可以帮助我解决这个问题吗?谢谢
const yearsOption = document.querySelector(".select");
yearsOption.addEventListener("change", filterYear());
function filterYear(e) {
const years = yearsOption.childNodes;
years.forEach(function (year) {
switch (e.target.value) {
case "2014":
if (year.classList.contains("2014")) {
year.style.display = "flex";
} else {
year.style.display = "none";
}
break;
case "2015":
if (year.classList.contains("2015")) {
year.style.display = "flex";
} else {
year.style.display = "none";
}
break;
case "2016":
if (year.classList.contains("2016")) {
year.style.display = "flex";
} else {
year.style.display = "none";
}
break;
case "2017":
if (year.classList.contains("2017")) {
year.style.display = "flex";
} else {
year.style.display = "none";
}
break;
case "2018":
if (year.classList.contains("2018")) {
year.style.display = "flex";
} else {
year.style.display = "none";
}
break;
}
});
}
<div class="years_option">
year:
<select name="years" class="select">
<option value="2014" class="2014">2014</option>
<option value="2015" class="2015">2015</option>
<option value="2016" class="2016">2016</option>
<option value="2017" class="2017">2017</option>
<option value="2018" class="2018">2018</option>
</select>
</div>
<div class="table">
<div class="2014" data-include-path="/data/2014batters.htm">2014</div>
<div class="2015" data-include-path="/data/2015batters.htm">2015</div>
<div class="2016" data-include-path="/data/2016batters.htm">2016</div>
<div class="2017" data-include-path="/data/2017batters.htm">2017</div>
<div class="2018" data-include-path="/data/2018batters.htm">2018</div>
</div>
最佳答案
这是您可能想要执行的操作的简化版本:
const divs=[...document.querySelectorAll(".table div")],
sel=document.querySelector(".select");
sel.addEventListener("change",ev=>divs.forEach(d=>
d.classList.toggle("hidden",!d.classList.contains(ev.target.value))
));
.hidden {display:none}
<div class="years_option">
year:
<select name="years" class="select">
<option value="2014" class="2014">2014</option>
<option value="2015" class="2015">2015</option>
<option value="2016" class="2016">2016</option>
<option value="2017" class="2017">2017</option>
<option value="2018" class="2018">2018</option>
</select>
</div>
<div class="table">
<div class="2014" data-include-path="/data/2014batters.htm">2014</div>
<div class="2015 hidden" data-include-path="/data/2015batters.htm">2015</div>
<div class="2016 hidden" data-include-path="/data/2016batters.htm">2016</div>
<div class="2017 hidden" data-include-path="/data/2017batters.htm">2017</div>
<div class="2018 hidden" data-include-path="/data/2018batters.htm">2018</div>
</div>
关于javascript - 我如何使用 JS 来使用 html select 标签,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/67819433/