jquery - 如何根据jquery下拉列表中选择的值过滤表中的数据？

Question

我有一个包含姓名、年龄、地址、状态等数据的表。在状态列中，它包含“已挑选项目”或“未挑选项目”等值。表格如下:

<table>
  <tr>
    <td>Name</td>
    <td>Age</td>
    <td>Address</td>
    <td>Status</td>
  </tr>
  <tr>
    <td>Sreeraj</td>
    <td>30</td>
    <td>KErala</td>
    <td>Item Picked</td>
  </tr>
  <tr>
    <td>Sreenivasan</td>
    <td>50</td>
    <td>KErala</td>
    <td>Item Not Picked</td>
  </tr>
  <tr>
    <td>Jincy</td>
    <td>60</td>
    <td>KErala</td>
    <td>Item Picked</td>
  </tr>
</table>

在上表中，我想根据状态列过滤所有数据，即。已拾取的项目和未拾取的项目。如果我从下拉列表中选择值作为 Item Picked ，那么在表中它应该仅显示已拾取的项目。

选择框如下所示:

<select name="option" class="optionn" id="items">
   <option value="">All</option>
   <option value="Item Picked">Item Picked</option>
   <option value="Item Not Picked">Item Not Picked</option>
</select>

有人可以提出解决方案吗？

Answer 1

希望下面的jquery脚本对您有所帮助。不要忘记包含 JQuery 脚本。

<script>
$(document).ready(function() {
    $('#items').on('change', function(){
        $("tr").show();
        if($('#items').val() =='Item Picked'){
            $("td:contains('Item Not Picked')").parent().hide();
        }
        if($('#items').val() =='Item Not Picked'){
            $("td:contains('Item Picked')").parent().hide();
        }
    });
});
</script>