Question

我已阅读多个主题，找不到符合我需求的主题。

这是一个例子：

<table>
 <tbody>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>Web Developer</td>
  </tr>
<tr>
    <td>Michael</td>
    <td>Doe</td>
    <td>Web Designer</td>
  </tr>
<tr>
    <td>Nicole</td>
    <td>Doe</td>
    <td>Graphic Designer</td>
  </tr>
</tbody>
</table>

这将是选择选项

<select>
<option value="developer">Developers</option>
<option value="designer">Designers/option>
</select>

所以我需要的是，当“设计师”它只列出设计师（图形，网络......）。

我怎样才能做到这一点？基本上我会有一个选项值，但它需要过滤包含不同内容的多个表行。

Answer 1

您可以在tr （此处为data-job）上添加属性，以跟踪每个人的工作，并将其与您更改选择时的选项值进行比较：

$('#jobSelect').on('change',function(){
  $('#people tr').hide();
  $('#people tr[data-job="'+$(this).val()+'"]').show();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="people">
  <tbody>
    <tr data-job="developer">
      <td>John</td>
      <td>Doe</td>
      <td>Web Developer</td>
    </tr>
    <tr data-job="designer">
      <td>Michael</td>
      <td>Doe</td>
      <td>Web Designer</td>
    </tr>
    <tr data-job="designer">
      <td>Nicole</td>
      <td>Doe</td>
      <td>Graphic Designer</td>
    </tr>
  </tbody>
</table>

<select id="jobSelect">
  <option value="developer">Developers</option>
  <option value="designer">Designers</option>
</select>

根据选择值过滤表

1 个答案: