如何为下拉选择跳转功能添加提交按钮 实现仅点击提交时按所选选项跳转URL

目标交互效果 #

• 下拉选择列表默认加载占位提示项"Pick a Website"，内置Google、YouTube、Netflix三个绑定对应跳转地址的可选条目
• 取消原有绑定在下拉框change事件上的跳转逻辑，彻底避免切换选项时立即触发页面跳转的问题
• 为下拉模块新增独立提交按钮，仅当用户主动点击提交按钮时，才读取当前下拉框的选中值执行页面重定向

代码改造步骤 #

• 删除原有下拉框元素上的跳转事件绑定代码，确保仅调整选中值不会触发任何页面行为
• 在下拉控件侧边新增提交按钮元素，为按钮绑定点击触发的跳转逻辑
• 增加边界判断：如果用户未选中有效网站选项、仍停留在默认占位项时，不执行跳转操作

完整实现代码 #

<select id="site-selector">
  <option value="" selected disabled>Pick a Website</option>
  <option value="google-target">Google</option>
  <option value="youtube-target">YouTube</option>
  <option value="netflix-target">Netflix</option>
</select>
<button id="submit-jump">Confirm Selection</button>

<!-- 引入项目内的jQuery资源 -->
<script>
$(function() {
  // 预定义选项与对应跳转地址的映射关系
  const siteMap = {
    'google-target': 'configured-google-url',
    'youtube-target': 'configured-youtube-url',
    'netflix-target': 'configured-netflix-url'
  }

  // 仅给提交按钮绑定点击事件
  $('#submit-jump').on('click', function() {
    const selectedKey = $('#site-selector').val();
    // 匹配到有效配置时才执行跳转
    if (selectedKey && siteMap[selectedKey]) {
      window.location.href = siteMap[selectedKey];
    }
  })
})
</script>

实现说明 #

• 下拉框的选中调整过程不会触发任何跳转逻辑，用户可以自由选择不同选项而不会被强制带离当前页面
• 所有跳转逻辑统一收敛在提交按钮的点击回调中，严格匹配“选完再点提交再跳转”的交互预期
• 通过映射关系管理选项值与目标地址，后续调整跳转链接无需改动交互逻辑

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