How do i work with html select tag with JS

Question

first I'm new to JS and tried to make some list with select tag.

to be specific, i wanted to make a function which if i select the "2014"option among several option then, chart will show only one div with classname "2014" and else will be not displayed. But somehow it didn't work like I expected could anyone help me with this problem? thankx

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>

Answer 1

This JS should work, made it using document.querySelectorAll():

const yearsOption = document.querySelector(".select");

yearsOption.addEventListener("change", function(e) {
  const year = e.target.value;

  document.querySelectorAll('.table > div').forEach(function(item) {
    item.style.display = (item.classList.contains(year) ? 'flex' : 'none');
  })
});

Answer 2

Here is a much simplified version of what you might want to do:

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>