jQuery实现双Select单提交URL跳转时报options未定义错误的排查修复

• 原跳转函数的DOM取值逻辑存在硬编码缺陷：你创建了2个同名的<form name="form">、2个同名的<select name="example">，通过原生document.form.example按name访问元素时，浏览器会返回匹配的元素集合而非单个select节点，无法读取options属性，直接抛出读取undefined的错误。删除一个select后，name匹配结果从集合变为单个元素，跳转逻辑自然恢复正常。
• 下拉框重置逻辑不可靠：使用prop('defaultSelected')获取默认值的方式本身有误，该属性用于标记某一个option是否为页面加载时默认选中项，无法直接作为select的重置值使用。
• 提交按钮状态判断逻辑不完整：原代码仅校验当前触发change事件的下拉框取值，未考虑两个下拉框互斥清空的特性，容易出现按钮状态和实际取值不匹配的问题。

1. 移除冗余的同名form包裹：本功能不需要依赖form提交逻辑，直接放置select元素即可，从根源上避免name属性冲突。
2. 下拉框重置逻辑简化：直接将目标select的值赋值为空字符串，对应默认空选项的value，逻辑更稳定。
3. 统一按钮状态校验逻辑：单独封装状态判断函数，任意时刻只要两个下拉框有一个存在有效值，就启用提交按钮，否则禁用。
4. 跳转逻辑改用jQuery按id取值：利用id全局唯一的特性直接获取单个select元素，废弃容易出问题的原生name取值写法。

修复后完整代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="service-select">
  <option value="">Select Service</option>
  <option class="select-field" value="https://service1.com">Service 1</option>
  <option class="select-field" value="https://service2.com">Service 2</option>
  <option class="select-field" value="https://service3.com">Service 3</option>
</select>

<select id="contact-select">
  <option value="">Select Contact</option>
  <option class="select-field" value="https://contact1.com">Contact 1</option>
  <option class="select-field" value="https://contact2.com">Contact 2</option>
  <option class="select-field" value="https://contact3.com">Contact 3</option>
</select>

<input id="mySubmit" type="button" name="test" value="GO">

// 初始化提交按钮为禁用状态
$('#mySubmit').prop('disabled', true);

// 选中服务下拉框时，清空联系下拉框
$('#service-select').change(function(){
  $('#contact-select').val('');
  updateSubmitState();
});

// 选中联系下拉框时，清空服务下拉框
$('#contact-select').change(function(){
  $('#service-select').val('');
  updateSubmitState();
});

// 统一更新提交按钮可用状态
function updateSubmitState() {
  const hasValidUrl = $('#service-select').val() !== '' || $('#contact-select').val() !== '';
  $('#mySubmit').prop('disabled', !hasValidUrl);
}

// 绑定提交按钮点击事件
$('#mySubmit').click(function(){
  // 两个下拉框互斥有值，直接取非空的URL
  const targetUrl = $('#service-select').val() || $('#contact-select').val();
  if (targetUrl) {
    window.location.href = targetUrl;
  }
});

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