如何实现Select2选项选中后直接跳转至对应URL？

嘿，这个需求其实很好实现！Select2本身就提供了专门的事件来监听选项选中的动作——不管是直接点击选项、搜索后选中，还是用键盘操作选中，都能触发这个事件，咱们直接用它来搞定跳转就行。

核心思路 #

使用Select2官方提供的select2:select事件，它会在用户通过任何方式选中选项时触发。我们只需要监听这个事件，获取选中选项的value属性值（也就是你预设的URL），然后执行页面跳转即可。

完整代码示例 #

首先是你的HTML结构（假设已经引入了jQuery和Select2的CSS/JS文件）：

<select id="siteSelector" class="select2" style="width: 300px;">
  <option value="">请选择页面</option>
  <option value="/page1.html">产品介绍页</option>
  <option value="/page2.html">用户中心</option>
  <option value="/page3.html">帮助文档</option>
</select>

然后是JavaScript代码：

// 先初始化Select2
$('#siteSelector').select2();

// 监听选中事件
$('#siteSelector').on('select2:select', function(event) {
  // 获取选中选项对应的URL
  // 方式1：通过Select2的事件对象获取（event.params.data.id对应option的value）
  const targetUrl = event.params.data.id;
  // 方式2：用原生jQuery方法获取，效果完全一致
  // const targetUrl = $(this).val();

  // 检查URL不为空时再跳转
  if (targetUrl.trim()) {
    window.location.href = targetUrl;
  }
});

关键细节说明 #

• select2:select事件是Select2专门为选中动作设计的，覆盖了所有可能的选中场景，完美匹配你的需求，比监听原生change事件更精准（原生change事件也能触发，但Select2的这个事件更贴合组件的交互逻辑）。
• 关于URL的获取：两种方式都可以，你可以根据自己的习惯选择。event.params.data.id是Select2封装后的属性，对应原生<option>的value；$(this).val()则是原生jQuery获取选中值的方法，结果完全相同。
• 加个trim()的判断是为了避免用户选中空选项时执行无效跳转，让代码更健壮。

如果你的项目是单页应用（比如Vue/React），只需要把window.location.href换成对应框架的路由跳转方法就行，核心的事件监听逻辑是一样的。

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