在表

Question

我正在使用select来更新表格的过滤器，它运行正常。但是有一个问题：如果我当时有多个select他们不能一起工作。

这是我的代码（您也可以在此JSFiddle中看到它）：

$('.filterselect').change(function () {
    _this = this;
    var main = this.name;
    $.each($("#table tbody tr").find("#"+main), function() {
        
        var label = $(this).closest('tr');
        if($(this).text().toLowerCase().indexOf($(_this).val().toLowerCase()) == -1 )
            $(label).hide();
        else
            $(label).show();                
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<select class="filterselect" name="data1">
    <option></option>    
    <option>Ahmed</option>
    <option>Ralf</option>
    <option>Rami</option>
</select>
<select class="filterselect" name="data2">
    <option></option>    
    <option>20</option>
    <option>25</option>
    <option>27</option>
    <option>36</option>
    <option>45</option>
</select>     
<select class="filterselect" name="data3">
    <option></option>    
    <option>Amman</option>
    <option>USA</option>
    <option>Ukrania</option>
</select>     
<table id="table"> 
    <thead>
        <tr>
            <th>Name</th>
            <th>Age</th>
            <th>Country</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td id="data1">Ahmed</td>
            <td id="data2">36</td>
            <td id="data3">Amman</td>
        </tr>
        <tr>
            <td id="data1">Ralf</td>
            <td id="data2">20</td>
            <td id="data3">USA</td>
        </tr>
        <tr>
            <td id="data1">Saleem</td>
            <td id="data2">25</td>
            <td id="data3">Russia</td>
        </tr>
        <tr>
            <td id="data1">Rami</td>
            <td id="data2">27</td>
            <td id="data3">USA</td>
        </tr>
        <tr>
            <td id="data1">JACK</td>
            <td id="data2">36</td>
            <td id="data3">USA</td>
        </tr>
        <tr>
            <td id="data1">emma</td>
            <td id="data2">26</td>
            <td id="data3">Usa</td>
        </tr>
        <tr>
            <td id="data1">Tareq</td>
            <td id="data2">45</td>
            <td id="data3">Ukrania</td>
        </tr>
        <tr>
            <td id="data1">rana</td>
            <td id="data2">36</td>
            <td id="data3">Solvikia</td>
        </tr>
    </tbody>
</table>

重现问题的示例：

1. 在第二个select
中选择年龄36岁
2. 选择国家美国排名第三select

它应该显示来自美国36岁的人的信息，而是显示来自美国的所有人（只有最后一个过滤器站，忽略之前的过滤器）。

Answer 1

您的代码上的问题是它只检查已更改的单个select字段。您需要检查所有3个select字段才能使其正常工作。 请尝试以下方法：

 $('.filterselect').change(function () {
        $("#table tbody tr").each(function() {
            var ck1 = $(this).find('#data1').text().toLowerCase();
            var ck2 = $(this).find('#data2').text().toLowerCase();
            var ck3 = $(this).find('#data3').text().toLowerCase();
            var val1 = $('select[name="data1"]').val().toLowerCase();
            var val2 = $('select[name="data2"]').val().toLowerCase();
            var val3 = $('select[name="data3"]').val().toLowerCase();
            if(ck1.indexOf(val1)==-1 || ck2.indexOf(val2)==-1 || ck3.indexOf(val3)==-1)
                 $(this).hide();
            else
                 $(this).show();                
        });
  });

http://jsfiddle.net/subinmertz/vm1Lf8st/1/

此处它检查每一行包含所有3个select字段＆amp;然后显示/隐藏行。