I have a question about showing items with select html tag and JS

Viewed 39

//embeding htm files
window.addEventListener("load", function () {
  var allElements = document.getElementsByTagName("*");
  Array.prototype.forEach.call(allElements, function (el) {
    var includePath = el.dataset.includePath;
    if (includePath) {
      var xhttp = new XMLHttpRequest();
      xhttp.onreadystatechange = function () {
        if (this.readyState == 4 && this.status == 200) {
          el.outerHTML = this.responseText;
        }
      };
      xhttp.open("GET", includePath, true);
      xhttp.send();
    }
  });
});

// showing items 
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="2014batters" data-include-path="/data/2014batters.htm">2014</div>
      <div class="2015batters" data-include-path="/data/2015batters.htm">2015</div>
      <div class="2016batters" data-include-path="/data/2016batters.htm">2016</div>
      <div class="2017batters" data-include-path="/data/2017batters.htm">2017</div>
      <div class="2018batters" data-include-path="/data/2018batters.htm">2018</div>
    </div>

I am new to Coding. and I wrote a similar question before but I could not get an answer which I wanted. I think that is because my explanation was not good enough, so I'm writing this new question to clarify what I am questioning.

You can see several option tags in my html(2014~2018). You also can see several embeded htm files below(class name is 2014batters~2018batters) too. And here is a thing I want to make: When I choose 2014 among options, I only can see "2014batters.htm"div and else is not displayed. But I do not have a clue to build a code yet. If you can help me it would be great help for me. thanks!

0 Answers
Related