本文介绍使用纯 javascript 实现基于下拉菜单的表格行级过滤功能：当用户选择某字段（如 value1～value5）时，自动隐藏该列值为 0 的整行，仅保留对应列值为 1 的行，支持一键重置（“no filter”选项）。

本文介绍使用纯 javascript 实现基于下拉菜单的表格行级过滤功能：当用户选择某字段（如 value1～value5）时，自动隐藏该列值为 0 的整行，仅保留对应列值为 1 的行，支持一键重置（“no filter”选项）。

在实际业务中（例如权限管理、多选标签筛选等场景），常需根据后端返回的布尔型整数字段（0/1）动态控制表格行的可见性。本方案不依赖任何框架，仅用原生 JavaScript 即可高效完成按列值过滤整行的需求。

✅ 正确的 HTML 结构是前提

首先确保 <select></select> 和 <table> 结构语义清晰、标签闭合完整。特别注意：<ul> <li>移除 <code><option></option> 上冗余且无效的 onclick 属性（HTML 中 select 应监听 change 事件，而非每个 option 绑定点击）；

<td> 内的 <code><input type="hidden"> 必须正确嵌套，且 name 与数据库字段名严格一致（如 value1）；

每行数据应包裹在 <tr> 中，便于后续按行控制显隐。<p>示例结构如下：</p><pre class="brush:php;toolbar:false;">&lt;select name=&quot;filter&quot;&gt; &lt;option value=&quot;none&quot;&gt;No filter&lt;/option&gt; &lt;option value=&quot;value1&quot;&gt;value1&lt;/option&gt; &lt;option value=&quot;value2&quot;&gt;value2&lt;/option&gt; &lt;option value=&quot;value3&quot;&gt;value3&lt;/option&gt; &lt;option value=&quot;value4&quot;&gt;value4&lt;/option&gt; &lt;option value=&quot;value5&quot;&gt;value5&lt;/option&gt; &lt;/select&gt; &lt;table id=&quot;data-table&quot;&gt; &lt;tr&gt; &lt;td&gt;&lt;input type=&quot;hidden&quot; name=&quot;value1&quot; value=&quot;1&quot;&gt;1&lt;/td&gt; &lt;td&gt;&lt;input type=&quot;hidden&quot; name=&quot;value2&quot; value=&quot;0&quot;&gt;0&lt;/td&gt; &lt;td&gt;&lt;input type=&quot;hidden&quot; name=&quot;value3&quot; value=&quot;1&quot;&gt;1&lt;/td&gt; &lt;td&gt;&lt;input type=&quot;hidden&quot; name=&quot;value4&quot; value=&quot;1&quot;&gt;1&lt;/td&gt; &lt;td&gt;&lt;input type=&quot;hidden&quot; name=&quot;value5&quot; value=&quot;0&quot;&gt;0&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;&lt;input type=&quot;hidden&quot; name=&quot;value1&quot; value=&quot;0&quot;&gt;0&lt;/td&gt; &lt;td&gt;&lt;input type=&quot;hidden&quot; name=&quot;value2&quot; value=&quot;1&quot;&gt;1&lt;/td&gt; &lt;td&gt;&lt;input type=&quot;hidden&quot; name=&quot;value3&quot; value=&quot;0&quot;&gt;0&lt;/td&gt; &lt;td&gt;&lt;input type=&quot;hidden&quot; name=&quot;value4&quot; value=&quot;1&quot;&gt;1&lt;/td&gt; &lt;td&gt;&lt;input type=&quot;hidden&quot; name=&quot;value5&quot; value=&quot;1&quot;&gt;1&lt;/td&gt; &lt;/tr&gt; &lt;!-- 更多行... --&gt; &lt;/table&gt;</pre><h3>✅ 核心 JavaScript 过滤逻辑</h3> <p>以下脚本监听 <code><select></select> 的 change 事件，根据所选 value 查找所有匹配 name 且 value="0" 的隐藏输入框，并隐藏其所在整行（<tr>），而非仅单元格：<pre class="brush:php;toolbar:false;">document.querySelector('select[name=&quot;filter&quot;]').addEventListener('change', function(e) { const table = document.getElementById('data-table'); const rows = table.querySelectorAll('tr'); // 重置：显示所有行 rows.forEach(row =&gt; row.style.display = ''); // 若选择非 &quot;none&quot; 项，则执行过滤 if (this.value !== 'none') { rows.forEach(row =&gt; { const targetInput = row.querySelector(`input[name=&quot;${this.value}&quot;][value=&quot;0&quot;]`); if (targetInput) { row.style.display = 'none'; // 隐藏整行 } }); } });</pre><blockquote> <p>? <strong>关键点说明</strong>： </p> <ul> <li>使用 <code>row.querySelector(...) 精准定位当前行内匹配条件的 <input>；

通过 row.style.display = 'none' 隐藏整行，解决原文中“只隐藏单元格”的问题；

"none" 值触发全量显示，实现无滤镜状态还原。

⚠️ 注意事项与最佳实践

• 性能提示：若表格行数超百，建议添加防抖或使用 DocumentFragment 批量操作 DOM；
• 服务端兼容性：此为纯前端过滤，敏感数据仍需服务端校验与权限控制；
• 无障碍访问：为 <select></select> 添加 aria-label，并确保键盘可操作（change 事件天然支持 Tab + Enter）；
• 扩展性增强：如需多字段联合过滤，可改用 Array.filter() + dataset 属性管理状态。

该方案简洁、可靠、零依赖，适用于 PHP + 原生 JS 混合渲染的传统项目，亦可无缝迁移至 Vue/React 中作为逻辑参考。