采用事件监听+数据驱动方式实现商品筛选：为各筛选控件绑定对应事件（下拉框用change、复选框委托、价格滑块防抖input），基于原始商品数据和动态生成的条件对象filter过滤，联动更新可选项并防死循环，最后渲染结果、展示状态及同步URL参数。
用事件监听绑定筛选条件
给每个筛选项（如品牌下拉框、价格滑块、分类复选框）添加 change 或 input 事件监听。例如品牌选择变化时，触发重新过滤商品列表：
- 下拉框用 change，实时性要求高可用 input
- 复选框组建议用事件委托，监听父容器，避免重复绑定
- 价格范围用 input 配合防抖（debounce），防止频繁计算
用数据驱动做条件组合与匹配
把所有商品原始数据存在 JS 变量中（比如 products = [...]），每次筛选时基于当前各控件的值生成一个“条件对象”，再用 filter() 逐条比对：
- 条件对象类似 { brand: 'Apple', price: [1000, 5000], category: ['phone'] }
- 空值或未选条件应忽略（如 brand 为空字符串则不参与过滤）
- 价格区间用 item.price >= min && item.price 判断
- 多选分类用 selectedCategories.some(c => item.category.includes(c))
联动更新其他筛选项的可选项
当某个条件变化后，其余筛选项的可选范围可能需要动态收缩。比如选了“手机”分类，品牌下拉框只显示有手机的品牌：
- 先用当前条件过滤出子集 filtered = products.filter(...)
- 再从该子集中提取唯一品牌：[...new Set(filtered.map(p => p.brand))]
- 清空并重绘对应下拉框的 <option>，保留用户已选值（如果还在新集合里）
- 注意：联动需避免死循环，比如 A 更新触发 B 更新，B 又反过来触发 A —— 加个标志位控制即可
渲染结果并反馈状态
过滤完成后，用 innerHTML 或 document.createElement 渲染商品列表，并同步更新筛选状态提示：
立即学习“Java免费学习笔记（深入）”；
- 显示“共找到 xx 款商品”，没结果时显示友好提示
- 已选条件用标签（tag）形式展示在顶部，点击可清除单个条件
- 保持 URL 参数同步（可选）：用 history.replaceState 和 URLSearchParams 记录条件，方便分享和刷新保留
