在 Vanilla JS 中使用下拉列表进行过滤

Question

我正在尝试使用下拉菜单进行过滤，但我做错了。似乎第一个“if 语句”是正确的，但即便如此它还是添加了禁用 tbody 的样式。有什么线索吗？提前致谢。

tbody = document.querySelectorAll("tbody");
dropdown = document.getElementById('filter_years');
function filterByYear(){
   dropdown_value = dropdown.value
    for (let i = 0; i < tbody.length; i++) {
      years = tbody[i].getAttribute("data-year");
      if(dropdown_value == years[i]){
         tbody[i].classList.remove("cat_hide_year");
         } else if(dropdown_value == "2020-2022") {
            tbody[i].classList.remove("cat_hide_year");
         }
         else{
            tbody[i].classList.add("cat_hide_year");
         }
      }
}
dropdown.onchange = filterByYear;

td{
  border:1px solid black;
  padding:10px 20px;
}
#filter_dropdown{
  margin-bottom:20px;
}
.cat_hide_year{
  display:none;
}

<div id="filter_dropdown">
  <select id="filter_years">
    <option value="2020-2022">2020-2022</option>
    <option value="2020">2020</option>
    <option value="2021">2021</option>
    <option value="2022">2022</option>
  </select>
</div>
<table>
  <tbody data-year="2022" class="">
    <tr><td>2022</td></tr>       
  </tbody>
  <tbody data-year="2021" class="">
    <tr><td>2021</td></tr>       
  </tbody>
  <tbody data-year="2020" class="">
    <tr><td>2020</td></tr>       
  </tbody>
</table>

Answer 1

你在 if(dropdown_value == years[i]){ 中有一个 [i] 不属于那里，但实际上我认为你是 over-complicating 这个。

注意我将第一个选项值更改为“全部”

const tbody = document.querySelectorAll("tbody");
document.getElementById('filter_years').addEventListener("change", function() {
  const dropdown_value = this.value;
  tbody.forEach(tb => tb.hidden = dropdown_value !== "all" && dropdown_value !== tb.dataset.year)
})

td {
  border: 1px solid black;
  padding: 10px 20px;
}

#filter_dropdown {
  margin-bottom: 20px;
}

<div id="filter_dropdown">
  <select id="filter_years">
    <option value="all">2020-2022</option>
    <option value="2020">2020</option>
    <option value="2021">2021</option>
    <option value="2022">2022</option>
  </select>
</div>
<table>
  <tbody data-year="2022" class="">
    <tr>
      <td>2022</td>
    </tr>
  </tbody>
  <tbody data-year="2021" class="">
    <tr>
      <td>2021</td>
    </tr>
  </tbody>
  <tbody data-year="2020" class="">
    <tr>
      <td>2020</td>
    </tr>
  </tbody>
</table>

Answer 2

只需删除if语句中的[i]

// AS-IS
if(dropdown_value == years[i]){

// TO-BE
if(dropdown_value == years){

tbody = document.querySelectorAll("tbody");
dropdown = document.getElementById('filter_years');
function filterByYear(){
   dropdown_value = dropdown.value
    for (let i = 0; i < tbody.length; i++) {
      years = tbody[i].getAttribute("data-year");
      if(dropdown_value == years){
         tbody[i].classList.remove("cat_hide_year");
         } else if(dropdown_value == "2020-2022") {
            tbody[i].classList.remove("cat_hide_year");
         }
         else{
            tbody[i].classList.add("cat_hide_year");
         }
      }
}
dropdown.onchange = filterByYear;

td{
  border:1px solid black;
  padding:10px 20px;
}
#filter_dropdown{
  margin-bottom:20px;
}
.cat_hide_year{
  display:none;
}

<div id="filter_dropdown">
  <select id="filter_years">
    <option value="2020-2022">2020-2022</option>
    <option value="2020">2020</option>
    <option value="2021">2021</option>
    <option value="2022">2022</option>
  </select>
</div>
<table>
  <tbody data-year="2022" class="">
    <tr><td>2022</td></tr>       
  </tbody>
  <tbody data-year="2021" class="">
    <tr><td>2021</td></tr>       
  </tbody>
  <tbody data-year="2020" class="">
    <tr><td>2020</td></tr>       
  </tbody>
</table>

在 Vanilla JS 中使用下拉列表进行过滤

Filtering whit a dropdown an Vanilla JS

javascript

filter

dropdown