帶有多選選項的jQuery過濾器

Question

如何過濾jQuery中的多個選擇？

如果我有表是這樣的：

$('#mask').on('change', function(){ 
 
    var isiwak = $('.wak').val(); 
 
    var isi = $("#mask").val(); 
 

 

 
    if(isiwak=="allwak" && isi == "all"){ 
 
    $(".allshow").show(); 
 
    } else { 
 
    $("td:not(."+isi+")").parent().hide(); 
 
    $("."+isi).parent().show(); 
 
    } 
 
}); 
 

 
//OnChange waktu 
 
$('.wak').on('change', function(){ 
 
    var isiwak = $('.wak').val(); 
 
    var isi = $("#mask").val(); 
 

 

 
    if(isiwak=="allwak" && isi == "all"){ 
 
    $(".allshow").show(); 
 
    } else { 
 
    $("td:not(."+isiwak+")").parent().hide(); 
 
    $("."+isiwak).parent().show(); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table border="1"> 
 
    <thead> 
 
    <tr> 
 
     <th>No</th><th>Nama Maskapai</th><th>Jam Terbang</th><th>Action</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody id="data"> 
 
    <tr class="allshow" style=""> 
 
     <td class="num"></td> 
 
     <td class="b">b</td> 
 
     <td class="pagi">02:09</td> 
 
     <td><a href="#" onclick="deleteRows(this)">Delete</a> <a href="#" class="naik">Up</a> <a href="#" class="turun">Down</a></td> 
 
    </tr> 
 

 
    <tr class="allshow" style=""> 
 
     <td class="num"></td> 
 
     <td class="a">a</td> 
 
     <td class="pagi">01:08</td> 
 
     <td><a href="#" onclick="deleteRows(this)">Delete</a> <a href="#" class="naik">Up</a> <a href="#" class="turun">Down</a></td> 
 
    </tr> 
 

 
    <tr class="allshow" style=""> 
 
     <td class="num"></td> 
 
     <td class="b">b</td> 
 
     <td class="siang">12:12</td> 
 
     <td><a href="#" onclick="deleteRows(this)">Delete</a> <a href="#" class="naik">Up</a> <a href="#" class="turun">Down</a></td> 
 
    </tr> 
 

 
    <tr class="allshow"> 
 
     <td class="num"></td> 
 
     <td class="c">c</td> 
 
     <td class="malam">19:20</td> 
 
     <td><a href="#" onclick="deleteRows(this)">Delete</a> <a href="#" class="naik">Up</a> <a href="#" class="turun">Down</a></td> 
 
    </tr> 
 

 
    <tr class="allshow" style=""> 
 
     <td class="num"></td> 
 
     <td class="b">b</td> 
 
     <td class="pagi">09:12</td> 
 
     <td><a href="#" onclick="deleteRows(this)">Delete</a> <a href="#" class="naik">Up</a> <a href="#" class="turun">Down</a></td> 
 
    </tr> 
 

 
    <tr class="allshow"> 
 
     <td class="num"></td> 
 
     <td class="c">c</td> 
 
     <td class="pagi">10:20</td> 
 
     <td><a href="#" onclick="deleteRows(this)">Delete</a> <a href="#" class="naik">Up</a> <a href="#" class="turun">Down</a></td> 
 
    </tr> 
 

 
    <tr class="allshow" style=""> 
 
     <td class="num"></td> 
 
     <td class="c">c</td> 
 
     <td class="siang">12:12</td> 
 
     <td><a href="#" onclick="deleteRows(this)">Delete</a> <a href="#" class="naik">Up</a> <a href="#" class="turun">Down</a></td> 
 
    </tr> 
 

 
    <tr class="allshow"> 
 
     <td class="num"></td> 
 
     <td class="a">a</td> 
 
     <td class="malam">19:20</td> 
 
     <td><a href="#" onclick="deleteRows(this)">Delete</a> <a href="#" class="naik">Up</a> <a href="#" class="turun">Down</a></td> 
 
    </tr> 
 

 
    <tr class="allshow" style=""> 
 
     <td class="num"></td> 
 
     <td class="a">a</td> 
 
     <td class="siang">12:12</td> 
 
     <td><a href="#" onclick="deleteRows(this)">Delete</a> <a href="#" class="naik">Up</a> <a href="#" class="turun">Down</a></td> 
 
    </tr> 
 

 
    <tr class="allshow"> 
 
     <td class="num"></td> 
 
     <td class="b">b</td> 
 
     <td class="pagi">19:20</td> 
 
     <td><a href="#" onclick="deleteRows(this)">Delete</a> <a href="#" class="naik">Up</a> <a href="#" class="turun">Down</a></td> 
 
    </tr> 
 
    </tbody> 
 
</table> 
 

 
<select id="mask"> 
 
    <option value="all"> -Pilih Maskapai- </option> 
 
    <option value="a">a</option> 
 
    <option value="b">b</option> 
 
    <option value="c">c</option> 
 
</select> 
 

 
<select class="wak"> 
 
    <option value="allwak"> -Pilih Waktu- </option> 
 
    <option value="pagi">pagi</option> 
 
    <option value="siang">siang</option> 
 
    <option value="malam">malam</option> 
 
</select>

我想有兩個選擇，第一個選擇過濾是「非農產品市場準入maskapai」和第二選擇是「果醬terbang」，其中'果醬terbang「有班級'pagi'，'siang'，'malam'。

我想使用2選擇如果我選擇'nama maskapai'，他們將顯示所有'nama maskapai'並且還會選擇。

此代碼只是可以篩選一個選擇選項。

Answer 1

你只能讓一個過濾器的功能，那應該是這樣的：

$(document).ready(function() { 
 
    $('#mask').on('change', function() { 
 
    filter(); 
 
    }); 
 

 
    //OnChange waktu 
 
    $('.wak').on('change', function() { 
 
    filter(); 
 
    }); 
 

 
    function filter() { 
 
    var isiwak = $('.wak').val(); 
 
    var isi = $("#mask").val(); 
 

 
    var $all = $(".allshow"); 
 
    $all.hide() 
 

 
    if (isiwak === "allwak" && isi === "all") { 
 
     $all.show(); 
 
    } else if (isiwak === "allwak" && isi !== "all") { 
 
     $all.children("." + isi).parent().show() 
 
    } else if (isiwak !== "allwak" && isi === "all") { 
 
     $all.children("." + isiwak).parent().show() 
 
    } else { 
 
     $all.children("." + isiwak).parent().children("." + isi).parent().show(); 
 
    } 
 

 
    } 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table border="1"> 
 
    <thead> 
 
    <tr> 
 
     <th>No</th> 
 
     <th>Nama Maskapai</th> 
 
     <th>Jam Terbang</th> 
 
     <th>Action</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody id="data"> 
 
    <tr class="allshow" style=""> 
 
     <td class="num"></td> 
 
     <td class="b">b</td> 
 
     <td class="pagi">02:09</td> 
 
     <td> 
 
     <a href="#" onclick="deleteRows(this)">Delete</a> 
 
     <a href="#" class="naik">Up</a> 
 
     <a href="#" class="turun">Down</a> 
 
     </td> 
 
    </tr> 
 
    <tr class="allshow" style=""> 
 
     <td class="num"></td> 
 
     <td class="a">a</td> 
 
     <td class="pagi">01:08</td> 
 
     <td> 
 
     <a href="#" onclick="deleteRows(this)">Delete</a> 
 
     <a href="#" class="naik">Up</a> 
 
     <a href="#" class="turun">Down</a> 
 
     </td> 
 
    </tr> 
 
    <tr class="allshow" style=""> 
 
     <td class="num"></td> 
 
     <td class="b">b</td> 
 
     <td class="siang">12:12</td> 
 
     <td> 
 
     <a href="#" onclick="deleteRows(this)">Delete</a> 
 
     <a href="#" class="naik">Up</a> 
 
     <a href="#" class="turun">Down</a> 
 
     </td> 
 
    </tr> 
 
    <tr class="allshow"> 
 
     <td class="num"></td> 
 
     <td class="c">c</td> 
 
     <td class="malam">19:20</td> 
 
     <td> 
 
     <a href="#" onclick="deleteRows(this)">Delete</a> 
 
     <a href="#" class="naik">Up</a> 
 
     <a href="#" class="turun">Down</a> 
 
     </td> 
 
    </tr> 
 
    <tr class="allshow" style=""> 
 
     <td class="num"></td> 
 
     <td class="b">b</td> 
 
     <td class="pagi">09:12</td> 
 
     <td> 
 
     <a href="#" onclick="deleteRows(this)">Delete</a> 
 
     <a href="#" class="naik">Up</a> 
 
     <a href="#" class="turun">Down</a> 
 
     </td> 
 
    </tr> 
 
    <tr class="allshow"> 
 
     <td class="num"></td> 
 
     <td class="c">c</td> 
 
     <td class="pagi">10:20</td> 
 
     <td> 
 
     <a href="#" onclick="deleteRows(this)">Delete</a> 
 
     <a href="#" class="naik">Up</a> 
 
     <a href="#" class="turun">Down</a> 
 
     </td> 
 
    </tr> 
 
    <tr class="allshow" style=""> 
 
     <td class="num"></td> 
 
     <td class="c">c</td> 
 
     <td class="siang">12:12</td> 
 
     <td> 
 
     <a href="#" onclick="deleteRows(this)">Delete</a> 
 
     <a href="#" class="naik">Up</a> 
 
     <a href="#" class="turun">Down</a> 
 
     </td> 
 
    </tr> 
 
    <tr class="allshow"> 
 
     <td class="num"></td> 
 
     <td class="a">a</td> 
 
     <td class="malam">19:20</td> 
 
     <td> 
 
     <a href="#" onclick="deleteRows(this)">Delete</a> 
 
     <a href="#" class="naik">Up</a> 
 
     <a href="#" class="turun">Down</a> 
 
     </td> 
 
    </tr> 
 
    <tr class="allshow" style=""> 
 
     <td class="num"></td> 
 
     <td class="a">a</td> 
 
     <td class="siang">12:12</td> 
 
     <td> 
 
     <a href="#" onclick="deleteRows(this)">Delete</a> 
 
     <a href="#" class="naik">Up</a> 
 
     <a href="#" class="turun">Down</a> 
 
     </td> 
 
    </tr> 
 
    <tr class="allshow"> 
 
     <td class="num"></td> 
 
     <td class="b">b</td> 
 
     <td class="pagi">19:20</td> 
 
     <td> 
 
     <a href="#" onclick="deleteRows(this)">Delete</a> 
 
     <a href="#" class="naik">Up</a> 
 
     <a href="#" class="turun">Down</a> 
 
     </td> 
 
    </tr> 
 
    </tbody> 
 
</table> 
 
<select id="mask"> 
 
    <option value="all">-Pilih Maskapai-</option> 
 
    <option value="a">a</option> 
 
    <option value="b">b</option> 
 
    <option value="c">c</option> 
 
</select> 
 
<select class="wak"> 
 
    <option value="allwak">-Pilih Waktu-</option> 
 
    <option value="pagi">pagi</option> 
 
    <option value="siang">siang</option> 
 
    <option value="malam">malam</option> 
 
</select>

在過去否則你篩選一個選擇，然後拿到第二的結果和過濾器。

這裏是plunker如果你想。

Answer 2

您也可以使用此fiddle：

JS：

$('#mask').on('change', function() { 
      var isiwak = $('.wak :selected').val(); 
      var isi = $("#mask :selected").val(); 


      if (isiwak == "allwak" && isi == "all") { 
       $(".allshow").show(); 
      } else { 
       $("td:not(." + isi + ")").parent().hide(); 
       $("." + isi).parent().show(); 
      } 
     }); 

     //OnChange waktu 
     $('.wak').on('change', function() { 
      var isiwak = $('.wak :selected').val(); 
      var isi = $("#mask :selected").val(); 
      if (isiwak == "allwak" && isi == "all") { 
       $(".allshow").show(); 
      } else { 
       $('tr').each(function() { 

        if ($(this).find('.' + isiwak).length > 0 && $(this).find('.' + isi).length > 0) { 
          $(this).show();       
        } 
        else if ($(this).attr('class') == undefined) { 
         $(this).show(); 
        } 
        else { 
         $(this).hide(); 
        } 
       }); 
      } 
     });