基于下拉列表的表格过滤器

Posted 2023-05-09

【中文标题】基于下拉列表的表格过滤器

【英文标题】：table filter based on drop down list

【发布时间】：2016-04-23 08:04:28

【问题描述】：

目前我有一个表格，其中包含一个下拉列表，其中包含不同的正文部分以过滤表格。我的问题是如何在选择下拉项目时过滤表格？

另外，如果我想在用户双击表格元素时显示剩余数据，我应该在哪里存储剩余数据？ 下拉列表

<select>
  <option value="" disabled selected>Select Body Part</option>
  <option value="Chest">Chest</option>
  <option value="Back">Back</option>
</select>

表格

<tr>
  <th>#</th>
  <th>Exercise name</th>
  <th>Target Muscle</th>
</tr>
@foreach ($exercises as $exercise)
  <tr>
    <td>$exercise->id</td>
    <td>$exercise->name</td>
    <td>$exercise->bodyPart</td>
  </tr>
@endforeach

【参考方案1】：

您可以简单地使用JQuery，请尝试以下代码：

<select id="filter">
  <option value="" disabled selected>Select Body Part</option>
  <option value="Chest">Chest</option>
  <option value="Back">Back</option>
</select>

<tr>
  <th>#</th>
  <th>Exercise name</th>
  <th>Target Muscle</th>
</tr>

@foreach ($exercises as $exercise)
<tr class="$exercise->bodyPart bodyparts">
  <td>$exercise->id</td>
  <td>$exercise->name</td>
  <td>$exercise->bodyPart</td>
</tr>
@endforeach

<script language="javascript">
  $(document).ready(function(e) 
    $("#filter").change(function()

      if($(this).val() != "")
        $(".bodyparts").hide();
        $("." + $(this).val()).show();
      
    );
  );
</script>

【讨论】：

tks 我会试试看！