Jquery通过td中的隐藏输入字段值选择tr

Question

我是jQuery语言的初学者，我有一个问题。

我的网站上有一个这样的表：

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

如您所见，行具有与类型相关联的隐藏输入（type1 => 1）。

使用下拉选择器我选择一个值：

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

使用过滤器中的事件OnChange我想要选择表中具有输入字段值=的所有行到下拉列表中选择的行

我怎么能用Jquery做到这一点？ 在此先感谢所有的帮助

Answer 1

您可以组合一个属性选择器和:has()选择器 ：

这里的例子

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

在上面的代码片段中， $tr是一个jQuery对象，它包含所有desendant tr元素，这些元素包含一个带有.typology类的.typology和一个与所选值对应的value属性。

Answer 2

您可以先获取所需的值，然后将其用于您需要查找的任何内容：

$('#filter').on('change', function () {
  var selected_val = this.value;
  var els_needed = $('#filter-table').children().find('input.typology[value="'+selected_val+'"]');
});