如何在一个表上使用多个筛选列表(html-select)来缩小结果，而不产生冲突？

Question

我不是一个程序员，但试图创建一个简单的学术网站。我在一个表中有许多文章，并设法使用一些javascript和select-html来创建一个从W3学校运行的过滤器。我试图添加第二个select-html过滤器，以进一步缩小结果，但似乎只有第一个列表才能工作。我尝试添加额外的it来区分这两个列表，但是很可能做错了并且无法工作。

我想要做的是使用第一个过滤器来保留所有Author1实例，如果您选择使用第二个筛选器缩小到Category1，那么它将导致所有Author1和Category1 (在上面的例子中，只保留顶部行)。

​

function myFunction() {
  var input, filter, table, tr, td, i;
  input = document.getElementById("mylist");
  filter = input.value.toUpperCase();
  table = document.getElementById("myTable");
  tr = table.getElementsByTagName("tr");
  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td")[0];
    if (td) {
      if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    }
  }
}

<select id="mylist" onchange="myFunction()" class='form-control' style="max-width: 250px; min-width: 250px">
  <option></option>
  <option>Author1</option>
  <option>Author2</option>
</select>

<select id="mylist" onchange="myFunction()" class='form-control' style="max-width: 250px; min-width: 250px">
  <option></option>
  <option>Category1</option>
  <option>Category2</option>
</select>


<table id="myTable" height="100%" width="100%">
  <tr>
    <td>Author1, Category1</td>
  </tr>
  <tr>
    <td>Author1, Category2</td>
  </tr>
</table>

​

Answer 1

下面是一个工作版本，使用

• addEventListener
• hidden
• map

它可能比你所期望的要复杂，但它使用的是现代和推荐的方法。

​

const rows = document.querySelectorAll("#myTable tbody tr"); // all rows with data
document.getElementById("filter").addEventListener("change", function() { // any select change
  const filters = [...this.querySelectorAll("select")].map(sel => sel.value); // make an array of values
  rows.forEach(row => { // loop over all rows
    const string = [...row.querySelectorAll("td")].map(td => td.textContent.trim()).join(" "); // join the cell content
    const found = filters.every(filter => { // every filter is looked at
      if (filter === "") return true; // it could be empty
      return string.includes(filter); // if not return true if found
    })
    row.hidden = filters.join("") != "" && !found; // hide if something was selected and not found
  })
})

<div id="filter">
  <select class='form-control' style="max-width: 250px; min-width: 250px">
    <option></option>
    <option>Author1</option>
    <option>Author2</option>
  </select>

  <select class='form-control' style="max-width: 250px; min-width: 250px">
    <option></option>
    <option>Category1</option>
    <option>Category2</option>
  </select>
</div>

<table id="myTable" height="100%" width="100%">
  <tr>
    <td>Author1, Category1</td>
  </tr>
  <tr>
    <td>Author1, Category2</td>
  </tr>
</table>

​

多个

​

const rows = document.querySelectorAll("#myTable tbody tr"); // all rows with data
document.getElementById("filter").addEventListener("change", function() { // any select change
  const selected = document.querySelectorAll('select option:checked'); 

  const filters = Array.from(selected).map(el => el.value); // make an array of values
  rows.forEach(row => { // loop over all rows
    const string = [...row.querySelectorAll("td")].map(td => td.textContent.trim()).join(" "); // join the cell content
    const found = filters.some(filter => { // every filter is looked at
      if (filter === "") return true; // it could be empty
      return string.includes(filter); // if not return true if found
    })
    row.hidden = filters.join("") != "" && !found; // hide if something was selected and not found
  })
})

<div id="filter">
  <select class='form-control' style="max-width: 250px; min-width: 250px" multiple>
    <option>Author1</option>
    <option>Author2</option>
  </select>

  <select class='form-control' style="max-width: 250px; min-width: 250px" multiple>
    <option>Category1</option>
    <option>Category2</option>
  </select>
</div>

<table id="myTable" height="100%" width="100%">
  <tr><td>Author1</td></tr>
  <tr><td>Author2</td></tr>
  <tr><td>Author3, Category1</td></tr>
  <tr><td>Category2</td></tr>
</table>

​