本文教你使用 html `data-*` 属性配合 javascript `change` 事件，实现在任意一个下拉框（“）被选中时，自动提取两个自定义值并重定向到带查询参数的新页面，无需提交按钮。
在 Web 开发中，常需根据用户在下拉菜单中的选择动态触发行为（如跳转、加载数据）。与按钮点击不同， 元素的交互核心是 change 事件——它在用户真正更改选项并失去焦点（或回车确认）时触发，语义准确、兼容性好，远比 onclick 更可靠（onclick 在点击任意选项时都触发，包括重复点击同一项，易导致误跳转）。
✅ 正确做法：使用 data-* 属性 + change 事件委托
HTML 中不能使用非法属性名（如 val1、val2），必须使用符合规范的自定义属性：data-val1 和 data-val2。同时，为便于统一监听，建议将两个 包裹在一个容器中，并采用事件委托方式绑定一次监听器，提升性能与可维护性。
