Filtering table by country

Question

HI i have a table and i need to filter by last column with dropdown <select>. My filtering if country does not exist removing all rows <tr> But if country exist adding all rows but i need one row with this country not all.

    $(document).ready(function () {
        $('#select_country').on('change', function () {
            var selected = $(this).val();
            var tr = $('tr');
            var td = $('td:last-child').text().trim();
            if (td.indexOf(selected) > -1) {
                $(tr).removeClass('cashback_filter_none');
            } else {
                $(tr).addClass('cashback_filter_none');
            }
        });
    });

Answer 1

You're are comparing the value of the #select_country to the text of the last td. That doesn't seem right. You should verify that is the case by console.log the values for debugging.

A good idea is to store the value of each country cell as an attribute upfront.

Example:

document.querySelector("select").addEventListener("change", function(ev) {
  var filter = this.value
  document.querySelectorAll("table td").forEach(function(td) {
    if (td.getAttribute("data-value") == filter || filter == "") {
      td.classList.remove("hide")
    } else {
      td.classList.add("hide")
    }
  })
})

.hide {
  display: none
}

<select>
  <option value="">Select Country</option>
  <option value="1">Spain</option>
  <option value="2">Italy</option>
  <option value="3">Israel</option>
  <option value="4">Japan</option>
</select>

<table>
  <tr>
    <td data-value="3">Israel</td>
  </tr>
  <tr>
    <td data-value="4">Japan</td>
  </tr>
</table>