jQuery 具有多选选项的过滤器

Question

如何在 jquery 中过滤多个 select？

如果我有这样的 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>

我想用两个 select 进行过滤，第一个 select 用于 'nama maskapai'，第二个 select 用于 'jam terbang'，其中 'jam terbang' 有class 'pagi', 'siang', 'malam'.

我想使用 2 select 如果我 select 'nama maskapai' 它们将显示所有 'nama maskapai' 以及 select.

此代码只能使用一个 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>

在最后一个 else 中过滤一个 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();
                    }
                });
            }
        });

jQuery 具有多选选项的过滤器

jQuery filter with multiselect option

html

javascript

jquery

crud

filter