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

Question

我正在为我的应用程序中的表实现过滤器。该表基于三个过滤器进行过滤：region filter、role filter 和 active 过滤。 根据从任一过滤器中选择的选项，即仅考虑一个下拉菜单时，过滤效果非常好。

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

例如过滤应该如下所示。

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

应用了区域过滤器

虽然已经选择了地区，但现在已经选择了角色

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

如何实现上述过滤？

//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;
  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")[2];
      if (td) {
        if (td.innerHTML.indexOf(filter) > -1) {
          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");
  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];
      if (td) {
        if (td.innerHTML.indexOf(filter) > -1) {
          tr[i].style.display = "";
        } else {
          tr[i].style.display = "none";
        }
      } else {
        var a = "No Records Found!!!";
      }
    }
  }
});

<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>

Answer 1

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

<!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>

Answer 2

为<select> 元素创建一个通用事件处理程序，并使用filter() 方法获取满足条件的<TR>。

$('.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!!!");
  }

});

<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>

Answer 3

这里是解决方案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!!!";
                            }
                        }
                    }
                });