Bootstrap Select选择选项后跳转至对应链接问题求助

嘿，我懂你遇到的困扰了——用原生change事件监听Bootstrap Select组件没生效对吧？这是因为Bootstrap Select是基于原生select封装的自定义组件，它有自己的事件体系，原生的change事件没法准确捕捉到组件的选择变化。

给你个靠谱的解决方案，用Bootstrap Select官方提供的changed.bs.select事件来监听选择操作：

完整代码示例 #

HTML部分

<select class="selectpicker">
  <option value="https://stackoverflow.com/">Home</option>
  <option value="https://stackoverflow.com/questions/ask">Ask Question</option>
</select>

JavaScript部分

// 先初始化Bootstrap Select组件
$('.selectpicker').selectpicker();

// 绑定组件专属的选择变化事件
$('.selectpicker').on('changed.bs.select', function() {
  // 获取选中选项的目标链接
  const targetUrl = $(this).val();
  // 验证链接有效后跳转
  if (targetUrl) {
    window.location.href = targetUrl;
  }
});

为什么原来的代码没生效？ #

Bootstrap Select会把原生的select元素隐藏，生成一套自定义的下拉UI结构，原生的change事件会被组件的封装逻辑拦截，所以没法触发你写的回调。而changed.bs.select是组件专门暴露的事件，会在用户完成选择（不管是点击选项还是用键盘选择）时准确触发，能完美捕捉到选择变化。

额外小提示 #

• 一定要确保加载顺序正确：先引入jQuery，再引入Bootstrap的CSS和JS，最后引入Bootstrap Select的CSS和JS
• 如果需要在跳转前加确认提示或其他逻辑，直接在事件回调里补充代码就行

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