17370845950

本文解决 jquery 下拉筛选器仅显示单个匹配结果的问题，核心在于调整 `hide()` 调用位置——应先统一隐藏所有行，再逐个显示符合条件的行，而非在循环中反复覆盖显示状态。

在使用 jQuery 实现表格状态筛选时，一个常见误区是将 row.hide() 放入 .each() 循环内部，导致每次匹配都先隐藏全部行、再显示当前行，最终仅保留最后一次匹配的显示效果（即“只显示一个”）。正确做法是：先批量隐藏所有目标行，再遍历筛选出需显示的行并单独 show()。

以下是修正后的完整代码（含 HTML 结构与 jQuery 逻辑）：

Select Your State:

  Select a State
  Alabama
  Alaska
  Texas



Event A — Dallas, TX
Event B — Austin, TX
Event C — Birmingham, AL
Event D — Anchorage, AK

$("#filter").change(function() {
  const filterValue = $(this).val();
  const $rows = $('.row-conventions');

  // ✅ 关键修正：统一隐藏所有行（执行一次）
  $rows.hide();

  // 再遍历，仅对匹配项显示
  if (fil
terValue === "all") {
    $rows.show();
  } else {
    $rows.filter(`[data-type="${filterValue}"]`).show();
  }
});

? 优化建议：使用 .filter() 替代 .each() 可提升可读性与性能。如上例所示，$rows.filter('[data-type="Texas"]').show() 直接选取所有匹配元素并统一显示，语义更清晰，也避免手动 DOM 检查。

注意事项：

• 确保 data-type 属性值严格匹配下拉选项值（区分大小写、空格）；
• 若状态名含特殊字符（如 '、"），建议改用 .filter(function) + $(this).data('type') 安全比对；
• 页面初始化时可调用一次 $("#filter").trigger('change')，确保默认状态（如 "all"）生效。

通过这一调整，筛选器即可正确显示所有匹配州的事件条目，彻底解决“只返回一个结果”的问题。