javascript - jQuery filter with multiselect option -

how can filter multiple select in jquery?

if have table :

$('#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>

i want filter 2 select, first select 'nama maskapai' , second select 'jam terbang' 'jam terbang' have class 'pagi', 'siang', 'malam'.

i want use 2 select if select 'nama maskapai' show 'nama maskapai' , select.

this code can filter 1 select option.

you can make 1 filter function, this:

$(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>

in last else filter 1 select, result , filter second.

here plunker if want.