本文教你使用 html `data-*` 属性和 javascript `change` 事件，实现在任意一个下拉框（`
在 Web 开发中，常需根据用户对下拉菜单的选择动态跳转并携带参数。与按钮点击不同，
✅ 正确做法：用 data-* 存储参数 + change 事件委托
HTML 中不应使用非法属性（如 val1、val2），而应采用标准的自定义数据属性 data-val1 和 data-val2。同时，为提升性能与可维护性，推荐使用事件委托：将 change 监听器绑定到共同父容器，再通过 event.target 精准获取当前触发的
以下是完整、可直接运行的实现方案：
? 关键要点说明
- dataset 是安全桥梁：selectedOption.dataset.val1 会自动映射 data-val1，且自动处理大小写转换（如 data-user-id → dataset.userId）。
- change 比 click 更可靠：click 在用户点击选项时即触发（甚至未松开鼠标），而 change 保证用户已确认选择，符合表单交互规范。
- URL 编码不可少：若 val1 或 val2 含空格、中文、& 等特殊字符，必须用 encodeURIComponent() 包裹，否则参数解析会出错。
- 空选项防御：添加默认空
- 事件委托优势：只需一个监听器，即可响应多个
? 进阶提示（可选）
- 如需“联动逻辑”（例如 Box2 选项随 Box1 选择动态更新），应在 change 回调中调用渲染函数重新生成 Box2 的
- 若需保留当前页状态（如不刷新跳转），可改用 fetch() 加载 sheet_2.html 内容并局部渲染，或使用 history.pushState() 实现 SPA 风格导航。
掌握这一模式，你不仅能解决双下拉跳转问题，更能理解现代前端中“语义化标记 + 事件委托 + 数据驱动”的协作逻辑。
