HTML怎么制作电商风格的多条件筛选菜单-html教程-PHP中文网

电商筛选菜单必须用原生form包裹，因其通过FormData自动采集多选、忽略未选checkbox、同步name与后端参数，并支持校验；否则手动遍历input易出错且难维护。

html怎么制作电商风格的多条件筛选菜单

电商风格的多条件筛选菜单不是靠一堆 div + click 事件硬堆出来的，核心是用原生 form 结构组织语义、靠 FormData 统一采集状态、再由 JS 驱动过滤或发请求。不这么做，加个分页、URL 同步或移动端适配就卡死。

不用 form 的后果很直接：你得手动遍历每个 input、判断 type、处理 checkbox 多选、拼 query string——而且 DOM 一改，JS 就断。而 form 天然支持：

form.elements 直接拿到所有控件，包括 checkbox 和 select[multiple]
new FormData(form) 自动忽略未选中的 checkbox、合并同名 name（如多个 brand）、跳过 disabled 项
form.checkValidity() 可配合 required 做基础校验，不用自己写正则

常见错误：把 form 改成 div class="filter-form"，然后 JS 里用 document.querySelectorAll('[name]') 硬捞——一旦漏了 name 或拼错，整个采集逻辑就失效。

name 不是随便起的类名，它必须和后端 API 的 query 参数名完全一致。比如后端接收 ?price_min=100&price_max=500&category=phone，那前端就得：

特别注意：name="brand[]" 是 PHP 风格，在纯 HTML/JS 场景下毫无意义。FormData 不会识别方括号，反而导致后端收不到数据。

HTML Text Extract

从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。

下载

直接遍历 form.elements 或用 new FormData(form) 是最稳的方式，避免手动查 class、拼字符串。注意点：

多个同名 checkbox（如 name="brand"）被选中时，FormData 会自动收集所有值，无需额外处理
price_min 和 price_max 可能为空，需显式判断：if (minVal !== "" && maxVal !== "") { }
用 Array.from(formData.entries()) 转为键值对数组，方便 filter：[["brand", "apple"], ["rating", "4"]]

如果后端返回的是 JSON 数据而非 DOM，直接用 JS 数组过滤再渲染，性能更好，但需自行处理 XSS 风险。

原生 select[multiple] 在 iOS Safari 和部分安卓浏览器中会触发全屏原生选择器，且不显示已选项勾标，用户根本不知道自己选了几个——这是最常被忽略的实际问题。

无法通过 CSS 伪类（如 ::-webkit-scrollbar）可靠定制滚动条，更没法加复选框图标
若项目必须支持移动端多选，建议放弃原生 multiple，改用带搜索、可点击打钩的 JS 方案（如 Choices.js 或 tom-select）
若坚持用原生方案，至少加一段提示文字：“长按可多选”或“按住 Cmd/Ctrl 点击”，并确保 size ≥ 3 让用户看到多个选项

价格滑块联动、标签 data-category 绑定、实时过滤防抖——这些都不是锦上添花，而是电商筛选菜单在真实设备上能用、好用、不崩的关键点。