如何通过下拉框选择传递两个参数并触发页面跳转？

一、先修正HTML结构 #

你原来写的val1/val2属于非规范自定义属性，改成HTML5标准的data-val1/data-val2写法，同时给每个下拉框添加ID，方便JavaScript精准获取元素：

<select name="Box 1" id="box1">
  <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 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>

二、JavaScript实现逻辑 #

不要用onclick事件，下拉框的选择动作应该绑定change事件——这个事件只会在用户选中新选项时触发，点击下拉框展开不会触发，完全匹配你“选完选项就跳转”的需求。

情况1：选任意下拉框的选项，携带该选项的两个参数跳转 #

比如用户选第一个下拉框的1.2，就携带val1=One和val2=Two跳转；选第二个的2.3就携带val1=Two和val2=Three跳转：

// 获取两个下拉框元素
const box1 = document.getElementById('box1');
const box2 = document.getElementById('box2');

// 跳转逻辑函数
function jumpToSheet() {
  // 获取触发事件的下拉框当前选中的选项
  const selectedOption = event.target.options[event.target.selectedIndex];
  // 读取选项的自定义属性值
  const val1 = selectedOption.dataset.val1;
  const val2 = selectedOption.dataset.val2;

  // 编码参数避免特殊字符破坏URL，然后跳转
  window.location.href = `sheet_2.html?s2_val1=${encodeURIComponent(val1)}&s2_val2=${encodeURIComponent(val2)}`;
}

// 给两个下拉框绑定change事件
box1.addEventListener('change', jumpToSheet);
box2.addEventListener('change', jumpToSheet);

情况2：选任意下拉框时，携带两个下拉框各自的选中参数跳转 #

比如第一个下拉框选1.1，第二个选2.2，就携带val1=One（来自第一个下拉框选中项）和val2=Two（来自第二个下拉框选中项）跳转：

const box1 = document.getElementById('box1');
const box2 = document.getElementById('box2');

function jumpToSheet() {
  // 分别获取两个下拉框选中项的参数
  const val1 = box1.options[box1.selectedIndex].dataset.val1;
  const val2 = box2.options[box2.selectedIndex].dataset.val2;

  window.location.href = `sheet_2.html?s2_val1=${encodeURIComponent(val1)}&s2_val2=${encodeURIComponent(val2)}`;
}

box1.addEventListener('change', jumpToSheet);
box2.addEventListener('change', jumpToSheet);

三、关键原理说明 #

1. 事件选择原因：click事件会在用户点击下拉框展开时就触发，完全不符合需求；change事件仅在下拉框选中值发生变化时触发，正好匹配“选完选项跳转”的时机。
2. 自定义属性规范：data-*是HTML5规定的自定义属性写法，浏览器会自动将这些属性挂载到元素的dataset对象上，既方便JavaScript读取，又不会和HTML原生属性冲突。
3. 参数编码：encodeURIComponent()用于处理参数中的空格、&、=等特殊字符，避免这些字符破坏URL结构，保证参数能正确传递到sheet_2.html。
4. 事件绑定方式：使用addEventListener实现逻辑与结构分离，比直接在HTML中写onchange更易维护，后续修改逻辑无需改动HTML代码。

四、额外提示 #

• 如果需要用户必须选完两个下拉框才跳转，可以给每个下拉框添加默认空选项：<option value="" selected disabled>请选择</option>，然后在jumpToSheet函数中添加判断，确认两个下拉框均选中有效选项后再执行跳转。
• 确认sheet_2.html的路径正确：和当前页面在同一目录下直接写文件名即可，不在同一目录需写相对路径（如./pages/sheet_2.html）或绝对路径。

内容的提问来源于stack exchange，提问作者LEBoyd