多条件过滤器如何使用 Jquery 工作？

Question

如何让多个过滤条件同时起作用？目前我可以使用个别条件进行过滤。但是在给出多个条件时，它只是根据最后一个过滤条件进行过滤。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>



      <div class="form-group">
                            <h6>Name</h6>
                            <input id="Name" type="text" class="form-control" placeholder="Name" />
                        </div>
                          <div class="form-group">
                            <h6>Title</h6>
                            <input id="Title" type="text" class="form-control" placeholder=" Title" />
                        </div>
                        <div class="form-group">
                            <h6>City</h6>
                            <select id="City" class="form-control select2" style="width: 100%;">
                                <option selected="selected">Select a City</option>
                                <option>A</option>
                                <option>B</option>
                                <a href="Scripts/">Scripts/</a>
                            </select>
                        </div>



     
     $(document).ready(function () {
        $("#Name").on("keyup", function () {
            var value = $(this).val().toLowerCase();
            $("#tranmittalsTable tr").filter(function () {
                $(this).toggle($(this).find("td:eq(1)").text().toLowerCase().indexOf(value) > -1)
            });
        });
    });

    $(document).ready(function () {
        $("#Title").on("keyup", function () {
            var value = $(this).val().toLowerCase();
            $("#tranmittalsTable tr").filter(function () {
                $(this).toggle($(this).find("td:eq(2)").text().toLowerCase().indexOf(value) > -1)
            });
        });
    });

    $(document).ready(function () {
        $("#City").on("change", function () {
            var value = $(this).val().toLowerCase();
            $("#tranmittalsTable tr").filter(function () {
                $(this).toggle($(this).find("td:eq(3)").text().toLowerCase().indexOf(value) > -1)
            });
        });
    });

Answer 1

这是您想要实现的功能示例：

     var selectedName ='';
     var selectedTitle ='';
     var selectedCity ='';
     
   
    var myFilter = function () {
       $("#tranmittalsTable tr").filter(function () {        
          $(this).toggle($(this).find("td:eq(1)").text().toLowerCase().indexOf(selectedName) > -1 &&
          $(this).find("td:eq(2)").text().toLowerCase().indexOf(selectedTitle) > -1 &&
          $(this).find("td:eq(3)").text().toLowerCase().indexOf(selectedCity) > -1)            
        });                          
     };
    
        $("#Name").on("keyup", function () {
            selectedName = $(this).val().toLowerCase();            
            myFilter();
        });    
    
        $("#Title").on("keyup", function () {
           selectedTitle = $(this).val().toLowerCase();
           myFilter();
        });

        $("#City").on("change", function () {
           selectedCity = $(this).val().toLowerCase(); 
           if (selectedCity == 'select a city')
             selectedCity ='';
           myFilter();
        });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group">
                            <h6>Name</h6>
                            <input id="Name" type="text" class="form-control" placeholder="Name" />
                        </div>
                          <div class="form-group">
                            <h6>Title</h6>
                            <input id="Title" type="text" class="form-control" placeholder=" Title" />
                        </div>
                        <div class="form-group">
                            <h6>City</h6>
                            <select id="City" class="form-control select2" style="width: 100%;">
                                <option selected="selected">Select a City</option>
                                <option>A</option>
                                <option>B</option>
                                <a href="Scripts/">Scripts/</a>
                            </select>
                        </div>
 <br/>
 
 <table id="tranmittalsTable">
  <tr>
    <td>1</td>
    <td>John</td>
    <td>T1</td>
    <td>A</td>
  </tr>
    <tr>
    <td>2</td>
    <td>Tom</td>
    <td>T1</td>
    <td>A</td>
  </tr>
  <tr>
    <td>3</td>
    <td>Pom</td>
    <td>T2</td>
    <td>A</td>
  </tr>
  <tr>
    <td>4</td>
    <td>Lina</td>
    <td>T3</td>
    <td>A</td>
  </tr>
  <tr>
    <td>5</td>
    <td>Corina</td>
    <td>T5</td>
    <td>B</td>
  </tr>

 </table>

Answer 2

在 JQuery 过滤中，我们可以使用 AND 和 OR 运算，如下所示。

AND运算

a=$('[myc="blue"][myid="1"][myid="3"]');

OR运算，使用逗号

a=$('[myc="blue"],[myid="1"],[myid="3"]');

在你的情况下，如果你想使用 OR 然后检查下面的代码。

$(document).ready(function () {
    $("#City").on("change", function () {
        var value = $(this).val().toLowerCase();
        $("#tranmittalsTable tr").filter(function () {
            $(this).toggle($(this).find("[td:eq(3)], 
[td:eq(2)]").text().toLowerCase().indexOf(value) > -1)
        });
    });
});

在你的情况下，如果你想使用 AND 然后检查下面的代码。

$(document).ready(function () {
    $("#City").on("change", function () {
        var value = $(this).val().toLowerCase();
        $("#tranmittalsTable tr").filter(function () {
            $(this).toggle($(this).find("[td:eq(3)]
[td:eq(2)]").text().toLowerCase().indexOf(value) > -1)
        });
    });
});

多条件过滤器如何使用 Jquery 工作？

how multiple condition filter can work using Jquery?

html

c#

jquery

filter

bootstrap-4