jQuery filter with multiselect option

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 ', где' jam terbang 'имеют класс' pagi ',' siang ',' malam '.

Я хочу использовать 2 select, если я выбираю 'nama maskapai', они будут показывать все 'nama maskapai', а также с помощью select.

этот код можно фильтровать только одним вариантом.

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(); 
        } 
       }); 
      } 
     });