本文教你使用原生 javascript 监听多个 `
在 Web 表单交互中，常需在用户选择下拉选项后立即响应——例如跳转页面并携带参数。与按钮点击不同，下拉框（<select>）应监听 change 事件（而非 click），因为 change 在选项真正变更且失去焦点时触发，语义更准确、兼容性更好，且能避免重复触发。
关键在于：不能将参数写在 val1/val2 这类非标准属性中（HTML 规范不支持，JS 无法直接读取）。正确做法是使用语义化、可扩展的 data-* 自定义属性，如 data-val1 和 data-val2。这些属性可通过元素的 .dataset 对象安全访问，无需解析 HTML 或正则匹配。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
以下是完整实现方案：
✅ HTML 结构（语义清晰，支持无障碍）
<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 逻辑（事件委托 + 安全跳转）
document.addEventListener('DOMContentLoaded', () => {
const boxesContainer = document.getElementById('boxes');
const handleSelectChange = (event) => {
const select = event.target;
const selectedOption = select.options[select.selectedIndex];
// 从选中项读取 data-val1 和 data-val2
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; // ✅ 取消注释即可启用跳转
}
};
// 使用事件委托：监听容器，响应所有 select 的 change 事件
boxesContainer.addEventListener('change', handleSelectChange);
});? 为什么这样设计？
- change 而非 click：click 在用户点击任意位置（包括未切换选项时）都会触发；change 仅在选项实际改变后触发，行为更符合预期。
- 事件委托：为父容器 #boxes 统一绑定事件，无需分别为每个 <select> 添加监听器，代码更简洁、动态增删下拉框也无需重新绑定。
- dataset 安全读取：selectedOption.dataset.val1 自动将 data-val1 转为驼峰命名（如 data-user-id → dataset.userId），避免手动 getAttribute()，且天然过滤非法属性。
- encodeURIComponent()：对参数值进行 URL 编码，确保含空格、中文、符号（如 &, =）时链接仍有效——这是生产环境必备实践。
⚠️ 注意事项
- 若两个下拉框需协同生效（例如仅当两者都选完才跳转），应在 handleSelectChange 中检查两个 <select> 的当前值，再统一构造 URL；
- 避免在 change 中直接跳转导致用户误操作（如手滑点错）。可增加确认弹窗或改用 fetch() 加载内容局部刷新，体验更友好；
- 浏览器前进/后退可能触发 popstate，若需支持返回页状态，应配合 history.pushState() 做路由管理。
掌握这一模式，你不仅能实现双下拉联动跳转，更能延伸应用于表单实时验证、动态筛选、AJAX 加载等常见交互场景。
