Bootstrap-select - 如何在更改时触发事件

9 浏览
0 Comments

Bootstrap-select - 如何在更改时触发事件

我正在使用Bootstrap 3.0.2和Bootstrap-select插件。

这是我的选择列表:

这是我的JavaScript:

//初始化选择器
$('.selectpicker').selectpicker();
//在更改时需要控制选定值的函数
$('select.selectpicker').on('change', function(){
   var selected = $('.selectpicker option:selected').val();
   alert(selected);
});

问题

我的问题是change函数不起作用。它什么也不做，我找不到解决办法。

如果我将它放在document ready中而不是change函数中，它似乎可以工作。所以我猜我在这里犯了一个错误:

$('select.selectpicker').on('change', function(){

我还尝试仅使用:

$('.selectpicker').on('change', function(){

没有使用这个选择前缀，但是什么也没有改变。

更新

将jQuery代码放入document.ready()中即可解决。感谢Kartikeya的帮助。

0

3 答案

0 Comments

问题的原因：在使用Bootstrap-select插件时，想要在下拉菜单选项改变时触发事件，但是尝试使用的代码并不能正确获取到最后一个未选择的选项的值。

解决方法：使用另外一个解决方案，通过点击事件来获取被点击选项的值。具体的解决方法可以参考这个答案：https://stackoverflow.com/questions/36944647

0
0 Comments

问题出现的原因是需要在Bootstrap-select插件中触发一个change事件。而解决方法是使用以下代码：

$('.selectpicker').trigger('change');

0
0 Comments

问题的原因是Bootstrap Select使用自定义的div元素来与原始的上的事件，而不管是谁更新了它。

解决方法1 - 原生事件：

只需监听change事件，并使用javascript或jQuery获取所选值，如下所示：

$('select').on('change', function(e){
  console.log(this.value,
              this.options[this.selectedIndex].value,
              $(this).find("option:selected").val(),);
});

注意：与任何依赖于DOM的脚本一样，在执行之前，确保等待DOM准备就绪的事件。

解决方法2 - Bootstrap Select自定义事件：

Bootstrap Select有一系列自定义事件，其中包括changed.bs.select事件，用于在select的值更改后触发。它传递事件、点击的索引、新值和旧值。可以像这样使用它：

$("select").on("changed.bs.select", 
      function(e, clickedIndex, newValue, oldValue) {
    console.log(this.value, clickedIndex, newValue, oldValue)
});

另一个解决方法是使用上述解答中提到的方法，并标识两者之间的不同之处。请注意在option标签中将val=更改为value=。

0