本文详解如何为多个 `
在 Web 表单交互中，常需实现“选即跳转”的轻量级导航逻辑——例如用户从两个下拉菜单中任选其一，系统立即根据所选项携带的预设参数跳转到新页面。这种需求无需传统表单提交或额外按钮，关键在于正确监听 change 事件、安全提取结构化数据，并构造合法 URL。
✅ 正确做法：使用 data-* 属性 + 事件委托
HTML 中禁止使用非标准属性（如 val1="One"），应改用语义化、可扩展的 data-* 自定义属性：
dmap-jsapi-skill
下载
DMap GL地图JSAPI（dmapgl）开发指南。用于编写、审查、调试 DMap 地图 API 代码，涵盖地图初始化、覆盖物渲染、图层管理、事件处理、控件交互等任务。当用户提及 dmap、dmapgl、jsapi‑gl 或相关地图开发需求时自动触发。
<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="" 的默认选项，可避免误触发；data-* 属性名需小写连字符（如 data-val1），JS 中通过 dataset.val1 访问。
? JavaScript 实现：事件委托 + 安全解析
推荐使用事件委托（将监听器绑定在共同父容器上），既减少监听器数量，又天然支持动态添加的下拉框：
const boxes = document.getElementById('boxes');
const handleSelectionChange = (event) => {
// 确保触发源是 select 元素下的 option 变更
if (event.target.tagName !== 'SELECT') return;
const select = event.target;
const selectedOption = select.options[select.selectedIndex];
// 从选中项读取 data 属性
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; // ✅ 取消注释以启用实际跳转
}
};
// 绑定 change 事件（注意：不是 onclick！）
boxes.addEventListener('change', handleSelectionChange);⚠️ 关键注意事项
- 不要用 onclick：<select> 的点击事件无法准确捕获“选项变更”，而 change 事件在用户确认选择（失焦或回车）后触发，语义准确、兼容性好。
- 必须 encodeURIComponent()：若 val1 或 val2 含空格、中文、特殊符号（如 &, =），不编码会导致 URL 解析失败或 XSS 风险。
- 避免重复跳转：当前逻辑是“任一下拉框变化即跳转”。如需两个都选完再跳转，可改为监听两个 select 并检查二者是否均有有效值，再统一触发。
- 增强用户体验：可添加加载状态、禁用重复点击、或使用 fetch() 预加载目标页数据而非硬跳转。
✅ 总结
通过 data-* 属性存储业务参数、change 事件监听用户意图、encodeURIComponent 保障 URL 安全，即可优雅实现“无按钮下拉即跳转”。该方案结构清晰、易于维护，是现代前端处理轻量级表单导航的标准实践。
