How can I filter a table based on value selected from a dropdown?-CodePudding

I have a table with three columns, normally populated from a SQL database. I'd like to filter the third column based on the value selected from a dropdown menu. I found a W3 Schools tutorial and used it as a blueprint. However I can't get it to work:

<!DOCTYPE html>
    <html>
    <script>
      function filterSector() {
        var input, filter, table, tr, td, i, txtValue;
        input = document.getElementById("sector");
        filter = input.value;
        table = document.getElementById("portfolio");
        tr = table.getElementsByTagName("tr");

        for (i = 0; i < tr.length; i  ) {
          td = tr[i].getElementsByTagName("td")[2];
          if (td) {
            txtValue = td.value;
            if (txtValue.indexOf(filter) > -1) {
              tr[i].style.display = "";
            } else {
              tr[i].style.display = "none";
            }
          }
        }
      }
    </script>

    <body>

      <select id="sector" onkeyup="filterSector()">
        <option selected disabled hidden>Sectors</option>
        <option value="Industrials">Industrials</option>
        <option value="Information Technology">Information Technology</option>
      </select>

      <table id="portfolio">
        <tr>
            <td>AAPL</td>
            <td>Apple</td>
            <td>Information Technology</td>
        </tr>
        <tr>
            <td>MMM</td>
            <td>3M</td>
            <td>Industrials</td>
        </tr>
    </body>

    </html>

CodePudding user response：

The onkeyup event occurs when the user releases a key (on the keyboard).

Use onchange instead.

<select id="sector" onchange="filterSector()">
    <option selected disabled hidden>Sectors</option>
    <option value="Industrials">Industrials</option>
    <option value="Information Technology">Information Technology</option>
</select>

Your filter Sector function has a problem with this line below.

txtValue = td.value;

td.value is undefined. Then you can use td.innerText to solve this.

txtValue = td.innerText;

Final solution. I hope I've helped.

<!DOCTYPE html>
    <html>
    <script>
      function filterSector() {
        var input, filter, table, tr, td, i, txtValue;
        input = document.getElementById("sector");
        filter = input.value;
        table = document.getElementById("portfolio");
        tr = table.getElementsByTagName("tr");

        for (i = 0; i < tr.length; i  ) {
          td = tr[i].getElementsByTagName("td")[2];
          if (td) {
            txtValue = td.innerText;
            if (txtValue.indexOf(filter) > -1) {
              tr[i].style.display = "";
            } else {
              tr[i].style.display = "none";
            }
          }
        }
      }
    </script>

    <body>

      <select id="sector" onchange="filterSector()">
        <option selected disabled hidden>Sectors</option>
        <option value="Industrials">Industrials</option>
        <option value="Information Technology">Information Technology</option>
      </select>

      <table id="portfolio">
        <tr>
            <td>AAPL</td>
            <td>Apple</td>
            <td>Information Technology</td>
        </tr>
        <tr>
            <td>MMM</td>
            <td>3M</td>
            <td>Industrials</td>
        </tr>
    </body>

    </html>

CodePudding user response：

In the script replace txtValue = td.value; with txtValue = td.innerText;

This will extract the td value and then you can compare