代码之家  ›  专栏  ›  技术社区  ›  yasarui

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

html jquery javascript
  •  0
  • yasarui  · 技术社区  · 7 年前

    我正在应用程序中实现一个表的过滤器。 区域 滤波器, 角色 过滤器和 积极的 过滤器。 根据从任何一个过滤器中选择的选项(即仅考虑一个下拉列表),过滤工作非常好。

    但是我需要实现的是第二个下拉列表应该考虑第一个下拉列表,第三个下拉列表应该考虑第一个和第二个下拉列表。

    例如,过滤应该如下所示。

    未应用任何筛选,我的表如下所示

    enter image description here

    应用区域过滤器

    enter image description here

    区域已选定,角色已选定

    enter image description here

    已选择区域和角色,现在选择活动用户

    enter image description here

    如何实现上述过滤? 

    //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>
    3 回复  |  直到 7 年前
        1
  •  1
  •   Satpal    7 年前

    为创建公共事件处理程序 <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>
        2
  •  1
  •   Bhumi Shah    7 年前

    这是解决办法 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!!!";
                            }
                        }
                    }
                });
        3
  •  1
  •   Nina Scholz    7 年前

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

    <!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>
    推荐文章
    code-geek  ·  Jquery根据单选按钮选择隐藏或显示文本字段
    7 月前
    Dr.0000FF  ·  jQuery按钮点击不显示/隐藏内容
    8 月前
    user28928120  ·  如何在jquery中选择所有类?
    8 月前
    LauraNMS  ·  如何使用Waypoints js实现粘性元素和偏移量
    8 月前
    Eliable  ·  使点击计数器和进度条协同工作
    9 月前
    mlri  ·  从不同的onclick事件执行相同的javascript函数
    9 月前
    Cymro  ·  如何将jquery$(this)与$(document).keyup一起使用
    9 月前
    Jack Maessen  ·  在处理程序上使用时如何获取输入类型
    9 月前
    BlueDogRanch  ·  使用jQuery Datepicker和dateFormat、altFormat和altField以及$(this)
    9 月前
    Jameel  ·  Jquery:未捕获SyntaxError:在参数列表后的“Node”上执行“appendChild”失败:缺失)
    9 月前
    关于  
    代码之家 - 一站式码农服务社区
    沪ICP备11025650号