How to implement multiple filters in JavaScript using dropdowns

Question

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

Use a single event handler to filter data based on selected value(s) — Satpal
– Satpal, Commented Jun 12, 2018 at 8:03

Satpal · Accepted Answer · 2018-06-12 08:35:19Z

Create a common 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.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>

Nina Scholz · Accepted Answer · 2018-06-12 08:50:50Z

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

Bhumi Shah · Accepted Answer · 2018-06-12 08:32:01Z

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!!!";
                            }
                        }
                    }
                });

Collectives™ on Stack Overflow

How to implement multiple filters in JavaScript using dropdowns

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related