javascript - 我如何使用带有 JS 的 html 选择标签

Question

首先，我是 JS 新手，并尝试使用选择标签制作一些列表。

具体来说，我想做一个函数，如果我在几个选项中选择“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>

标签： javascripthtml

Answer 1

这是您可能想要做的一个非常简化的版本：

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>