本文教你使用 html `data-*` 属性配合 javascript `change` 事件，实现在任意一个下拉框（`
在 Web 开发中，常需根据用户在下拉菜单中的选择动态触发行为（如跳转、加载数据）。与按钮点击不同，<select> 元素的交互核心是 change 事件——它在用户真正更改选项并失去焦点（或回车确认）时触发，语义准确、兼容性好，远比 onclick 更可靠（onclick 在点击任意选项时都触发，包括重复点击同一项，易导致误跳转）。
✅ 正确做法：使用 data-* 属性 + change 事件委托
HTML 中不能使用非法属性名（如 val1、val2），必须使用符合规范的自定义属性：data-val1 和 data-val2。同时，为便于统一监听，建议将两个 <select> 包裹在一个容器中，并采用事件委托方式绑定一次监听器，提升性能与可维护性。
以下是完整、可直接运行的示例代码：
<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>
<script>
const boxes = document.getElementById('boxes');
const handleSelection = (event) => {
const select = event.target;
const selectedOption = select.options[select.selectedIndex];
// 安全读取 data 属性（dataset 自动转为小驼峰）
const { val1, val2 } = selectedOption.dataset;
// 确保两项均有值才跳转（避免空选项触发）
if (val1 && val2) {
const url = `sheet_2.html?s2_val1=${encodeURIComponent(val1)}&s2_val2=${encodeURIComponent(val2)}`;
console.log('即将跳转至：', url);
// ⚠️ 实际使用时取消下一行注释
// window.location.href = url;
}
};
boxes.addEventListener('change', handleSelection);
</script>? 关键要点说明
- *`data-属性规范**：所有自定义属性必须以data-开头，浏览器会自动将连字符转为小驼峰（如data-val1→dataset.val1`），这是 W3C 标准且被所有现代浏览器支持。
- change 而非 click/input：change 是 <select> 的语义化事件，确保仅在有效选择变更后触发；而 click 会在每次点击都触发（含无效点击），input 对 <select> 支持有限且行为不一致。
- 事件委托优势：监听父容器 #boxes，无需分别为每个 <select> 单独绑定事件，代码更简洁，也天然支持后续动态添加的下拉框。
- URL 安全编码：使用 encodeURIComponent() 包裹参数值，防止中文、空格、特殊符号（如 &, =）破坏 URL 结构。
- 健壮性处理：添加空值校验（if (val1 && val2)）和默认空选项（value=""），避免用户未选择就意外跳转。
? 进阶提示（可选）
- 若需同时读取两个下拉框的当前值（而非仅触发的那个），可在 handler 中分别获取 box1 和 box2 的选中项 dataset，再组合拼接 URL。
- 如需跳转前进行表单验证或异步检查，可将 window.location.href = url 替换为 fetch() 或 axios.get() 调用，成功后再跳转。
- 避免在开发阶段直接启用跳转——先用 console.log(url) 验证逻辑，确认无误后再解除注释，防止调试时频繁丢失当前页面上下文。
掌握这一模式，你不仅能实现双下拉联动跳转，还能轻松扩展至多级联动筛选、动态表单生成等常见业务场景。
