javascript - 具有多选选项的 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>

我想用两个选择进行过滤，第一个选择是“nama maskapai”，第二个选择是“jam terbang”，其中“jam terbang”有类“pagi”、“siang”、“malam”。

如果我选择“nama maskapai”，我想使用 2 个选择，它们将显示所有“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>

在最后一个 else 中，您过滤一个选择，然后获取结果并过滤第二个。

这是 plunker如果你愿意的话。