如何使用jQuery在表中使用两个选择框值执行过滤操作？

Question

我有两个选择框。其中包含名称和主题......还有一个包含3列的表格。它们是name，subject，marks。我想根据这两个选择框值过滤这些表值。

我的代码

<select id="first">
    <option>Show all</option>
    <option>raja</option>
    <option>john</option>
</select>

<select id="second">
    <option>Show all</option>
    <option>english</option>
    <option>tamil</option>
</select>

<table border="1" id="test">
    <thead>
        <th>Name</th>
        <th>subject</th>
        <th>mark</th>
    </thead>
    <tbody>
    <tr>
        <td>raja</td>
        <td>english</td>
        <td>85</td>
   </tr>
 <tr>
        <td>raja</td>
        <td>tamil</td>
        <td>80</td>
   </tr>
         <tr>
        <td>john</td>
        <td>english</td>
        <td>95</td>
   </tr>
         <tr>
        <td>john</td>
        <td>tamil</td>
        <td>90</td>
   </tr>
    </tbody>
</table>

的jQuery

$('#first').change(function() {
            var val= $(this).val();
              $('#test').each(function() {
                  if($('#test tr > td:contains('+val+')'))
                  {
                      $(this).parent().show();
                  }
                  else
                  {                          
                 $(this).parent().hide();
                  }

             });

        });

Answer 1

嗨朋友们查看这段代码 DEMO 的 JS

var str=""
$('#first, #second').on('change',function(){

    var rows = $('#test tr:not(:first)');
    rows.hide();

    var sub = $("#second").val();
    var select= $('#first').val();
    if (select == "Show all" && sub == "Show all"){
        rows.show();
    }
    else if (sub == "Show all"){
        if (select != "Show all") str=":contains('" + select + "')"
        else str=""
    }else if (select == "Show all"){
        if (sub != "Show all") str=":contains('" + sub + "')"
        else str=""
    }else{
        str=":contains('" + sub + "'):contains('" + select + "')"
    }
    rows.filter(str).show();
    console.log(sub, select,str);
});

Answer 2

选中 Demo Fiddle

$('#first').on('change',function(){
    var rows = $('#test tr:not(:first)');
    var select = $(this).val();
    rows.hide();

    rows.filter(":contains('" + select + "')").show();

});

$('#second').on('change',function(){
    var rows = $('#test tr:not(:first)');
    var select = $(this).val();
    rows.hide();

    rows.filter(":contains('" + select + "')").show();
});