Jquery Select a tr by an hidden input field value inside a td

I’m a beginner with jQuery language and I’ve got a question.

I’ve got a Table in my website like this:

<table id="filter-table" class="table table-striped">
  <thead>
    <tr>
      <th>Code</th>
      <th>Name</th>
      <th>Typology</th>
      <th>Select</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>IYCE8</td>
      <td>NAME</td>
      <td>
        <input class='typology' type='hidden' value='1'>TYPE1
        <input class='typology' type='hidden' value='2'>TYPE2
        <input class='typology' type='hidden' value='3'>TYPE3
      </td>
      <td>
        <input type="checkbox">
      </td>
    </tr>
    <tr>
      <td>IYCE9</td>
      <td>NAME2</td>
      <td>
        <input class='typology' type='hidden' value='1'>TYPE1
        <input class='typology' type='hidden' value='2'>TYPE2
      </td>
      <td>
        <input type="checkbox">
      </td>
    </tr>
  </tbody>
</table>

as you can see rows have an hidden input associated to a typology (type1=>1).

with a dropdown selector i choose a value:

<select id="filter" name="filter">
  <option value="">SELECT ONE</option>
  <option value="1">TYPE1</option>
  <option value="2">TYPE2</option>
  <option value="3">TYPE3</option>
</select>

With the event OnChange in a filter i want to select all the rows in the table that have the input field value = to the one selected in the dropdown


solution

You could combine an attribute selector and the :has() selector:

Example Here

$('#filter').on('change', function () {
  var $tr = $('#filter-table tr:has(.typology[value="' + this.value + '"])');
});

In the snippet above, $tr is a jQuery object that contains all the desendant tr elements that contain an element with a class of .typology and a value attribute corresponding to the selected value.