如何使用下拉列表在JavaScript中实现多个过滤器

Question

我正在为我的应用程序中的表实现过滤器。该表基于三个过滤器区域过滤器，角色过滤器和活动过滤器。 根据从任何一个过滤器中选择的选项，即只考虑了一个下拉列表，过滤工作非常精细。

但是我需要实现的是第二次下拉应该考虑第一次下拉，第三次下拉应该是第一次和第二次。

例如，过滤应如下所示。

未应用任何过滤，我的表格如下所示

应用了区域过滤器的

虽然已选择区域，但已选择角色

虽然已选择区域和角色，但现在选择了活跃用户

如何实施上述过滤？

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div class="container">
  <div class="row">
    <div class="col-4">
      <select id="regionDropdown">
        <option value="All">All Region</option>
        <option value="Asia Pacific">Asia Pacific</option>
        <option value="Continental Europe">Continental Europe</option>
        <option value="North America">North America</option>
        <option value="United Kingdom">United Kingdom</option>
      </select>
    </div>
    <div class="col-4">
      <select id="roleDropdown">
        <option value="All">All Roles</option>
        <option value="Account Executive">Account Executive</option>
        <option value="Archer">Archer</option>
        <option value="Sales Manager">Sales Manager</option>
        <option value="SET Executive">SET Executive</option>
      </select>
    </div>
    <div class="col-4">
      <select id="associateStatusDropdown">
        <option value="All"> All Users </option>
        <option value="Yes">Active Users</option>
        <option value="No">Inactive Users</option>
      </select>
    </div>
  </div>
  <table class="table">
    <thead>
      <tr>
        <th> SL.NO </th>
        <th> Region </th>
        <th> Role </th>
        <th> Active </th>
      </tr>
    </thead>
    <tbody id="download-forms-table-tbody">
      <tr>
        <td> 1 </td>
        <td> North America </td>
        <td> Account Executive </td>
        <td> No </td>
      </tr>
      <tr>
        <td> 2 </td>
        <td> Continental Europe </td>
        <td> Archer </td>
        <td> Yes </td>
      </tr>
      <tr>
        <td> 3 </td>
        <td> Continental Europe </td>
        <td> Account Executive </td>
        <td> No </td>
      </tr>
      <tr>
        <td> 4 </td>
        <td> North America </td>
        <td> Account Executive </td>
        <td> Yes </td>
      </tr>
      <tr>
        <td> 5 </td>
        <td> Continental Europe </td>
        <td> Sales Manager </td>
        <td> No </td>
      </tr>
      <tr>
        <td> 6 </td>
        <td> Asia Pacific </td>
        <td> Account Executive </td>
        <td> yes </td>
      </tr>
      <tr>
        <td> 7 </td>
        <td> North America </td>
        <td> SET Executive </td>
        <td> No </td>
      </tr>
      <tr>
        <td> 8 </td>
        <td> United Kingdom </td>
        <td> Archer </td>
        <td> Yes </td>
      </tr>
      <tr>
        <td> 9 </td>
        <td> Continental Europe </td>
        <td> Archer </td>
        <td> No </td>
      </tr>
      <tr>
        <td> 10 </td>
        <td> Asia Pacific </td>
        <td> SET Executive </td>
        <td> Yes </td>
      </tr>
    </tbody>
  </table>
</div>

dt1[CJ(a = 1:7, b, unique = TRUE)]

Answer 1

以下是解决方案https://codepen.io/creativedev/pen/mKmEQX

//Filtering region dropdown
    $('body').on("change", '#regionDropdown', function() {
        var filter, table, tr, td, i;
        filter = $(this).val();
        table = document.getElementById("download-forms-table-tbody");
        tr = table.getElementsByTagName("tr");
        if (filter == "All") {
            // Loop through all table rows, and show anyrows that is hidden
            for (i = 0; i < tr.length; i++) {
                tr[i].style.display = "";
            }
        } else {
            // Loop through all table rows, and hide those who don't match the search query
            for (i = 0; i < tr.length; i++) {
                td = tr[i].getElementsByTagName("td")[1];
                if (td) {
                    if (td.innerHTML.indexOf(filter) > -1) {
                        tr[i].style.display = "";
                    } else {
                        tr[i].style.display = "none";
                    }
                } else {
                    var a = "No Records Found!!!";
                }
            }
        }
    });

    //Filtering role dropdown
    $('body').on("change", '#roleDropdown', function() {
        var filter, table, tr, td, i;
        var regionval = $('#regionDropdown :selected').val();
        filter = $(this).val();
        table = document.getElementById("download-forms-table-tbody");
        tr = table.getElementsByTagName("tr");
        if (filter == "All") {
            // Loop through all table rows, and show anyrows that is hidden
            for (i = 0; i < tr.length; i++) {
                tr[i].style.display = "";
            }
        } else {
            // Loop through all table rows, and hide those who don't match the search query
            for (i = 0; i < tr.length; i++) {
                var td1 = '';
                if (regionval != 'All') {
                    td1 = tr[i].getElementsByTagName("td")[1];
                    console.log(td1)
                }
                td = tr[i].getElementsByTagName("td")[2];
                console.log('td1' + td1)
                if (td) {
                    if (td.innerHTML.indexOf(filter) > -1) {
                        if (td1 != '') {
                            if (td1.innerHTML.indexOf(regionval) > -1) {
                                tr[i].style.display = "";
                            } else {

                                tr[i].style.display = "none";
                            }
                        }
                        if (td1 == '') {
                            tr[i].style.display = "";
                        }
                    } else {
                        tr[i].style.display = "none";
                    }
                }
            }
        }
    });

    //Show active inactive users
    $('body').on("change", '#associateStatusDropdown', function() {
                var filter, table, tr, td, i;
                filter = $(this).val();
                table = document.getElementById("download-forms-table-tbody");
                tr = table.getElementsByTagName("tr");
                var regionval = $('#regionDropdown :selected').val();
                var roleval = $('#roleDropdown :selected').val();
                if (filter == "All") {
                    // Loop through all table rows, and show anyrows that is hidden
                    for (i = 0; i < tr.length; i++) {
                        tr[i].style.display = "";
                    }
                } else {
                    // Loop through all table rows, and hide those who don't match the search query
                    for (i = 0; i < tr.length; i++) {
                        td = tr[i].getElementsByTagName("td")[3];

                    var td1 = '';
                    if (regionval != 'All') {
                        td1 = tr[i].getElementsByTagName("td")[1];
                    }

                    var td2 = '';
                    if (roleval != 'All') {
                        td2 = tr[i].getElementsByTagName("td")[2];
                    }
                        if (td) {
                            if (td.innerHTML.indexOf(filter) > -1) {
                                if (td1 != '') {
                                    if (td1.innerHTML.indexOf(regionval) > -1) {
                                        tr[i].style.display = "";
                                    } else {

                                        tr[i].style.display = "none";
                                    }
                                }
                                    if (td2 != '') {
                                        if (td2.innerHTML.indexOf(roleval) > -1) {
                                            tr[i].style.display = "";
                                        } else {
                                            tr[i].style.display = "none";
                                        }
                                    }
                                    if (td1 == '' || td2 == '') {
                                        tr[i].style.display = "";
                                    }
                                } else {
                                    tr[i].style.display = "none";
                                }
                            } else {
                                var a = "No Records Found!!!";
                            }
                        }
                    }
                });

Answer 2

为<select>元素创建一个公共事件处理程序，并使用符合critera的filter()方法get <TR>。

＆＃13;

＆＃13;

$('.container').on("change", 'select', function() {
  var region = $('#regionDropdown').val().toLowerCase(),
    role = $('#roleDropdown').val().toLowerCase(),
    associate = $('#associateStatusDropdown').val().toLowerCase();

  var table = $("#download-forms-table-tbody");
  var trs = table.find('tr');
  trs.hide();

  var filtered = trs.filter(function(index, elem) {
    var tds = $(elem).find('td');
    if (region !== "all" && tds.eq(1).text().trim().toLowerCase() !== region) {
      return false;
    }
    if (role !== "all" && tds.eq(2).text().trim().toLowerCase() !== role) {
      return false;
    }
    if (associate !== "all" && tds.eq(3).text().trim().toLowerCase() !== associate) {
      return false;
    }
    return true;
  })

  filtered.show();

  if (filtered.length == 0) {
    alert("No Records Found!!!");
  }

});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">

<body>
  <div class="container">
    <div class="row">
      <div class="col-4">
        <select id="regionDropdown">
          <option value="All">All Region</option>
          <option value="Asia Pacific">Asia Pacific</option>
          <option value="Continental Europe">Continental Europe</option>
          <option value="North America">North America</option>
          <option value="United Kingdom">United Kingdom</option>
        </select>
      </div>
      <div class="col-4">
        <select id="roleDropdown">
          <option value="All">All Roles</option>
          <option value="Account Executive">Account Executive</option>
          <option value="Archer">Archer</option>
          <option value="Sales Manager">Sales Manager</option>
          <option value="SET Executive">SET Executive</option>
        </select>
      </div>
      <div class="col-4">
        <select id="associateStatusDropdown">
          <option value="All"> All Users </option>
          <option value="Yes">Active Users</option>
          <option value="No">Inactive Users</option>
        </select>
      </div>
    </div>
    <table class="table">
      <thead>
        <tr>
          <th> SL.NO </th>
          <th> Region </th>
          <th> Role </th>
          <th> Active </th>
        </tr>
      </thead>
      <tbody id="download-forms-table-tbody">
        <tr>
          <td> 1 </td>
          <td> North America </td>
          <td> Account Executive </td>
          <td> No </td>
        </tr>
        <tr>
          <td> 2 </td>
          <td> Continental Europe </td>
          <td> Archer </td>
          <td> Yes </td>
        </tr>
        <tr>
          <td> 3 </td>
          <td> Continental Europe </td>
          <td> Account Executive </td>
          <td> No </td>
        </tr>
        <tr>
          <td> 4 </td>
          <td> North America </td>
          <td> Account Executive </td>
          <td> Yes </td>
        </tr>
        <tr>
          <td> 5 </td>
          <td> Continental Europe </td>
          <td> Sales Manager </td>
          <td> No </td>
        </tr>
        <tr>
          <td> 6 </td>
          <td> Asia Pacific </td>
          <td> Account Executive </td>
          <td> yes </td>
        </tr>
        <tr>
          <td> 7 </td>
          <td> North America </td>
          <td> SET Executive </td>
          <td> No </td>
        </tr>
        <tr>
          <td> 8 </td>
          <td> United Kingdom </td>
          <td> Archer </td>
          <td> Yes </td>
        </tr>
        <tr>
          <td> 9 </td>
          <td> Continental Europe </td>
          <td> Archer </td>
          <td> No </td>
        </tr>
        <tr>
          <td> 10 </td>
          <td> Asia Pacific </td>
          <td> SET Executive </td>
          <td> Yes </td>
        </tr>
      </tbody>
    </table>
  </div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

您可以使用单个函数和一些对象来指定wantes搜索条件和目标列以进行查找。然后更新可见性。

＆＃13;

＆＃13;

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB"
        crossorigin="anonymous">
</head>

<body>
    <div class="container">
        <div class="row">
            <div class="col-4">
                <select id="regionDropdown">
                    <option value="All">All Region</option>
                    <option value="Asia Pacific">Asia Pacific</option>
                    <option value="Continental Europe">Continental Europe</option>
                    <option value="North America">North America</option>
                    <option value="United Kingdom">United Kingdom</option>
                </select>
            </div>
            <div class="col-4">
                <select id="roleDropdown">
                    <option value="All">All Roles</option>
                    <option value="Account Executive">Account Executive</option>
                    <option value="Archer">Archer</option>
                    <option value="Sales Manager">Sales Manager</option>
                    <option value="SET Executive">SET Executive</option>
                </select>
            </div>
            <div class="col-4">
                <select id="associateStatusDropdown">
                    <option value="All"> All Users </option>
                    <option value="Yes">Active Users</option>
                    <option value="No">Inactive Users</option>
                 </select>
            </div>
        </div>
        <table class="table">
            <thead>
                <tr>
                    <th> SL.NO </th>
                    <th> Region </th>
                    <th> Role </th>
                    <th> Active </th>
                </tr>
            </thead>
            <tbody id="download-forms-table-tbody" >
                <tr>
                    <td> 1 </td>
                    <td> North America </td>
                    <td> Account Executive </td>
                    <td> No </td>
                </tr>
                <tr>
                    <td> 2 </td>
                    <td> Continental Europe </td>
                    <td> Archer </td>
                    <td> Yes </td>
                </tr>
                <tr>
                    <td> 3 </td>
                    <td> Continental Europe </td>
                    <td> Account Executive </td>
                    <td> No </td>
                </tr>
                <tr>
                    <td> 4 </td>
                    <td> North America </td>
                    <td> Account Executive </td>
                    <td> Yes </td>
                </tr>
                <tr>
                    <td> 5 </td>
                    <td> Continental Europe </td>
                    <td> Sales Manager </td>
                    <td> No </td>
                </tr>
                <tr>
                    <td> 6 </td>
                    <td> Asia Pacific </td>
                    <td> Account Executive </td>
                    <td> yes </td>
                </tr>
                <tr>
                    <td> 7 </td>
                    <td> North America </td>
                    <td> SET Executive </td>
                    <td> No </td>
                </tr>
                <tr>
                    <td> 8 </td>
                    <td> United Kingdom </td>
                    <td> Archer </td>
                    <td> Yes </td>
                </tr>
                <tr>
                    <td> 9 </td>
                    <td> Continental Europe </td>
                    <td> Archer </td>
                    <td> No </td>
                </tr>
                <tr>
                    <td> 10 </td>
                    <td> Asia Pacific </td>
                    <td> SET Executive </td>
                    <td> Yes </td>
                </tr>
            </tbody>
        </table>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script>
        var cols = {
                regionDropdown: 1,
                roleDropdown: 2,
                associateStatusDropdown: 3
            },
            filters = {
                regionDropdown: 'All',
                roleDropdown: 'All',
                associateStatusDropdown: 'All'
            };

        function filter(column, value) {
            var table = document.getElementById("download-forms-table-tbody"),
                tr = table.getElementsByTagName("tr"),
                i,
                keys,
                found;

            filters[column] = value;
            keys = Object.keys(filters);
            for (i = 0; i < tr.length; i++) {
                found = keys.every(function (k) {
                    var td = tr[i].getElementsByTagName("td")[cols[k]];
                    return filters[k] === "All" || td && td.innerHTML.indexOf(filters[k]) > -1;
                });
                tr[i].style.display = found ? "" : "none";
            }
        }

        //Filtering region dropdown
        $('body').on("change", '#regionDropdown', function () {
            filter('regionDropdown', $(this).val());
        });

        //Filtering role dropdown
        $('body').on("change", '#roleDropdown', function () {
            filter('roleDropdown', $(this).val());
        });

        //Show active inactive users
        $('body').on("change", '#associateStatusDropdown', function () {
            filter('associateStatusDropdown', $(this).val());
        });
    </script>
</body>
</html>

＆＃13;

＆＃13;

＆＃13;