如何製作雙選濾鏡？

Question

我在這段代碼中缺少一些東西，我的目標是在這個表上做2個過濾器，id =「myInput」的select必須是決定表出現並應用第一個過濾器的那個，那就是js ：

function myFunction() { 
    // Declare variables 
    var input, filter, table, tr, td, i; 
    input = document.getElementById("myInput"); 
    filter = input.value.toUpperCase(); 
    table = document.getElementById("myTable"); 
    tr = table.getElementsByTagName("tr"); 
    table.style.display = ''; 

    // Loop through all table rows, and hide those who don't match the search query 
    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"; 
     } 
    } 
    } 
} 

第二個（ID = 「myInput2」）應申請額外的過濾器，隱藏誰不匹配與另一列的行，這裏的JS：

function myFunction2() { 
    // Declare variables 
    var input, filter, table, tr, td, i; 
    input = document.getElementById("myInput2"); 
    filter = input.value.toUpperCase(); 
    table = document.getElementById("myTable"); 
    tr = table.getElementsByTagName("tr"); 

    // Loop through all table rows, and hide those who don't match the search query 
    for (i = 0; i < tr.length; i++) { 
    td = tr[i].getElementsByTagName("td")[5]; 
    if (td) { 
     if (td.innerHTML.toUpperCase().indexOf(filter) > -1) { 
     tr[i].style.display = ""; 
     } else { 
     tr[i].style.display = "none"; 
     } 
    } 
    } 
} 

這是HTML代碼（忘記br和其他不好的事情，我只是對現有代碼進行整合）

<label>Zona</label> <select id="myInput2" onchange="myFunction2()"> 
     <option value="">Tutte le zone</option> 
    </select> <label>Gruppo</label> 
    <select id="myInput" onchange="myFunction()"> 

     <option value="">Seleziona un gruppo di categoria</option> 
    </select> <br> 
    <br> 
    <table id="myTable" style="display: none;"> 
     <tr class="header"> 
      <th>Categoria</th> 
      <th>Descrizione</th> 
      <th>Classe</th> 
      <th>Tariffa</th> 
      <th>Zona</th> 
     </tr> 
     <c:forEach var="infoSezioni" items="${outParamInfoSezioni}"> 
      <tr> 
       <td style="display:none;">${infoSezioni.gruppo}</td> 
       <td>${infoSezioni.categoria}</td> 
       <td>${infoSezioni.descr}</td> 
       <td>${infoSezioni.classe}</td> 
       <td>${infoSezioni.tariffa}</td> 
       <td>${infoSezioni.zonaCens}</td> 
      </tr> 
     </c:forEach> 
    </table> 

問題是： 當我申請1過濾器，其他人不工作，我怎麼能解決這個問題？

Answer 1

請查看兩個過濾器一個和兩個

//apply filter + checking flag 
    if (td.innerHTML.toUpperCase().indexOf(filter) < 0 && (!tr[i].dataset.filtered)) { 
     tr[i].style.display = "none";   
     //giving flag 
     tr[i].dataset.filtered = true; 
     } 

這個

顯示錶時，無論是輸入1 &輸入2的值爲：

// and myFunction2() as well 
function myFunction() { 
    // Declare variables 
    var input, filter, table, tr, td, i; 
    input = document.getElementById("myInput"); 
    //remove unnecessary space 
    filter = input.value.trim().toUpperCase(); 
    //return if no value 
    if(filter.length > 0) {return;} 
    table = document.getElementById("myTable"); 
    tr = table.getElementsByTagName("tr"); 
    //displaying table 
    table.style.display = 'block'; 
...