HTML无原生多条件筛选组件，应基于语义化、FormData和统一过滤逻辑构建；FormData自动采集非空值，需用getAll()处理多选，过滤时须合并所有条件并转换数值类型。
HTML 本身没有“多条件筛选组件”——所有筛选行为都靠 JavaScript 驱动，而真正能稳定集成、方便复用的，是语义化 <form></form> + FormData + 统一过滤逻辑的组合。别找“组件”，先搭结构。
为什么不能直接引入一个“筛选组件”就完事
所谓“HTML 多条件筛选组件”，网上搜到的多数是 jQuery 插件、Vue 封装或 Bootstrap 扩展（如 Bootstrap Multiselect），它们依赖特定框架、有兼容包袱、且容易掩盖底层数据流向。真实项目里，你很快会遇到这些问题：
- 点击“重置”后 checkbox 不回退 → 没用
form.reset()，而是手动清空 DOM - URL 刷新后筛选状态丢失 → 没把
FormData同步进location.search或localStorage - 后端接口参数名是
category_id，但前端写成name="cat"→FormData提交后字段对不上，后端收不到 - 移动端点不中复选框 →
<label></label>没包住<input type="checkbox">，或 touch 区域太小
FormData 是最稳的数据采集方式
不用遍历 document.querySelectorAll('[name]')，也不用手动拼对象。只要整个筛选区是 <form id="filter-form"></form>，就能一次性拿到所有有效值：
const form = document.querySelector('#filter-form');
form.addEventListener('change', () => {
const data = Object.fromEntries(new FormData(form).entries());
// { brand: "apple", category: "phone", price_min: "100", rating: "4" }
});
关键点：
立即学习“前端免费学习笔记（深入）”；
- 同名
<input type="checkbox" name="tag">被选中多个时，FormData.entries()只返回第一个值；要用formData.getAll('tag')获取数组 -
<select multiple></select>的值也通过getAll()读取，不是.value - 空字符串、未选中的
checkbox、disabled元素会被自动忽略 —— 这正是你想要的“非空才参与过滤”逻辑 - 不要给
name加方括号（如name="brand[]"），那是 PHP 特定解析习惯，FormData不识别
前端实时过滤时，filter() 必须单次合并所有条件
别写 list.filter(byBrand).filter(byPrice).filter(byRating) —— 链式调用会让中间结果被截断，漏掉本该保留的项。正确做法是：对每条数据，一次性判断是否满足「当前所有已激活的条件」：
const filters = Object.fromEntries(new FormData(form).entries());
const visibleItems = rawData.filter(item => {
const matchBrand = !filters.brand || item.brand === filters.brand;
const matchPrice = !filters.price_min || item.price >= parseFloat(filters.price_min);
const matchRating = !filters.rating || item.rating >= parseFloat(filters.rating);
return matchBrand && matchPrice && matchRating;
});
注意：
- 每个条件默认为
true（即“不限制”），避免空输入导致整批数据被筛空 - 数值类字段（如价格、评分）必须用
parseFloat()转换，否则字符串比较会出错（"200" > "1000"为true） - 如果数据来自后端分页接口，这里只做条件组装，最终发请求：
fetch(`/api/items?${new URLSearchParams(filters)}`)
<dialog></dialog> 做筛选弹窗，但得管好兼容和焦点
想把筛选抽成弹窗？优先用原生 <dialog></dialog>，它自带模态层、Esc 关闭、焦点捕获，比手写 div.overlay 更可靠：
<dialog id="filter-dialog">
<form id="popup-filter-form">
<fieldset><legend>品牌</legend>
<label><input type="checkbox" name="brand" value="apple"> 苹果</label>
</fieldset>
<button type="submit">确定</button>
<button type="button" onclick="this.closest('dialog').close()">取消</button>
</form>
</dialog>
但要注意：
- Safari 15.4+ 才支持
showModal()，旧版需降级为dialog.show()+ 手动加 backdrop - 关闭弹窗必须用
dialog.close()，别用dialog.removeAttribute('open')，否则 Safari 可能残留滚动条 - 弹窗内表单提交后，别在弹窗里直接发请求 —— 把
FormData传出去，由主页面决定刷新列表还是更新 URL - 移动端需加
tabindex="-1"和focus()确保键盘用户能进入弹窗
最易被忽略的一点：筛选逻辑和数据源是解耦的。无论你用 <dialog></dialog>、侧边栏还是顶部栏，只要结构是 <form></form> + 正确 name，采集方式就一致；变的只是 UI 容器，不是数据通路。
