本文详解如何为两个 “ 元素绑定 `change` 事件，利用 `data-*` 属性存储关联参数，并在任一选择变更时自动拼接 url、跳转至目标页面，无需提交按钮。
在 Web 表单交互中，常需根据用户对下拉菜单（）的选择动态触发行为——例如组合多个字段的值，构造查询参数并跳转到新页面。本教程将手把手带你实现：当任意一个下拉框选项被更改时，立即读取其当前选中项所携带的两个自定义参数（如 data-val1 和 data-val2），拼接成带查询字符串的 URL，并执行页面跳转。
✅ 正确做法：使用 data-* 属性 + change 事件委托
HTML 中不能使用非标准属性（如 val1=”One”）——它们会被浏览器忽略且不符合规范。应改用语义化、可扩展的 data-* 自定义属性：
<div id="boxes">
<select name="Box 1" id="box1">
<option value="">请选择...</option>
<option data-val1="One" data-val2="One">1.1</option>
<option data-val1="One" data-val2="Two">1.2</option>
<option data-val1="One" data-val2="Three">1.3</option>
</select>
<select name="Box 2" id="box2">
<option value="">请选择...</option>
<option data-val1="Two" data-val2="One">2.1</option>
<option data-val1="Two" data-val2="Two">2.2</option>
<option data-val1="Two" data-val2="Three">2.3</option>
</select>
</div>
? 提示：添加空 value=”” 的默认选项，可避免页面加载即跳转；同时提升用户体验与表单健壮性。
对应的 JavaScript 使用事件委托（推荐）方式监听整个容器，避免为每个 单独绑定事件：
