jQuery下拉筛选仅返回单个匹配结果，如何显示全部匹配项？

问题根源是你的代码在遍历匹配行时，大概率用单个变量存储匹配元素，最后只显示该变量对应的行，导致之前匹配的行被覆盖，仅保留最后一个结果。以下是修正方案：

修正后的jQuery代码 #

// 监听州下拉框的变更事件
$('#state-select').on('change', function() {
  const selectedState = $(this).val().trim();
  const tableRows = $('table tbody tr'); // 仅操作数据行，排除表头

  // 先隐藏所有数据行
  tableRows.hide();

  // 遍历所有数据行，匹配目标州的行直接显示
  tableRows.each(function() {
    const rowState = $(this).find('.state').text().trim();
    if (rowState === selectedState) {
      $(this).show();
    }
  });

  // 若选择"全部"，显示所有行
  if (selectedState === 'all') {
    tableRows.show();
  }
});

配套HTML结构示例 #

<select id="state-select">
  <option value="all">全部州</option>
  <option value="Texas">德克萨斯州</option>
  <option value="California">加利福尼亚州</option>
</select>

<table>
  <thead>
    <tr>
      <th>活动名称</th>
      <th>State（州）</th>
      <th>举办日期</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>德州乡村音乐节</td>
      <td class="state">Texas</td>
      <td>2024-06-01</td>
    </tr>
    <tr>
      <td>德州科技峰会</td>
      <td class="state">Texas</td>
      <td>2024-07-15</td>
    </tr>
    <tr>
      <td>加州艺术博览会</td>
      <td class="state">California</td>
      <td>2024-08-20</td>
    </tr>
  </tbody>
</table>

核心修改说明 #

• 先统一隐藏所有数据行，再遍历显示匹配项，避免行状态混乱
• 遍历过程中直接对匹配行执行show()，不再用单个变量存储匹配结果（这是解决仅显示最后一行的关键）
• 增加trim()处理，规避文本前后空格导致的匹配失败问题
• 新增"全部"选项，支持一键显示所有活动行

内容的提问来源于stack exchange，提问作者cablank25