jquery - How to implement multiple filters in JavaScript using dropdowns

I am implementing a filter for a table in my application.The table is filtered based on three filters region filter, role filter and active filter. The filtering works very fine based on the option selected from any one of the filters i.e. when only one dropdown has been taken into consideration.

But what I need to implement is the second dropdown should take the first dropdown into consideration and the third dropdown should take the first and second.

For example the filtering should be like below.

without any filtering applied my table looks like below

with region filter applied

while region is already selected now role has been selected

while region and role already has been selected, now active users is selected

How can I implement the the above filtering?

//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=".1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">

<script src=".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>

But what I need to implement is the second dropdown should take the first dropdown into consideration and the third dropdown should take the first and second.

For example the filtering should be like below.

without any filtering applied my table looks like below

with region filter applied

while region is already selected now role has been selected

while region and role already has been selected, now active users is selected

How can I implement the the above filtering?

//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./bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">

<script src="https://ajax.googleapis./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>

Share Improve this question edited Jun 12, 2018 at 9:38 Satpal 133k13 gold badges167 silver badges170 bronze badges asked Jun 12, 2018 at 7:59 yasarui 6,5838 gold badges46 silver badges80 bronze badges

Use a single event handler to filter data based on selected value(s) – Satpal Commented Jun 12, 2018 at 8:03
@Satpal, it does, but it resets the old selections. – Nina Scholz Commented Jun 12, 2018 at 8:10

Add a ment |

3 Answers 3

Sorted by: Reset to default 2

Create a mon event handler for <select> element and use filter() method get <TR> which meets the critera.

$('.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./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn./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>

You could use a single function and some objects to specify the wantes search criteria and the target column for look up. Then update the visibility.

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn./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./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>

Here is the solution 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!!!";
                            }
                        }
                    }
                });

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

jquery - How to implement multiple filters in JavaScript using dropdowns - Stack Overflow

3 Answers 3

与本文相关的文章

评论列表(0)