JAVASCRIPT

filter a table based on combibox in js

unction filterTable() {
  // Variables
  let dropdown, table, rows, cells, country, filter;
  dropdown = document.getElementById("countriesDropdown");
  table = document.getElementById("myTable");
  rows = table.getElementsByTagName("tr");
  filter = dropdown.value;

  // Loops through rows and hides those with countries that don't match the filter
  for (let row of rows) { // `for...of` loops through the NodeList
    cells = row.getElementsByTagName("td");
    country = cells[1] || null; // gets the 2nd `td` or nothing
    // if the filter is set to 'All', or this is the header row, or 2nd `td` text matches filter
    if (filter === "All" || !country || (filter === country.textContent)) {
      row.style.display = ""; // shows this row
    }
    else {
      row.style.display = "none"; // hides this row
    }
  }
}
<select id="countriesDropdown" oninput="filterTable()">
  <option>All</option>
  <option>Sweden</option>
  <option>Germany</option>
</select>

<table id="myTable">
  <tr><th>Name</th><th>Country</th></tr><!-- header row uses 'th' instead of 'td' -->
  <tr><td>Inga</td><td>Sweden</td></tr>
  <tr><td>Helena</td><td>Sweden</td></tr>
  <tr><td>Hans</td><td>Germany</td></tr>
  <tr><td>Anna</td><td>Germany</td></tr>
</table>