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

Question

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

这是我的选择列表:

<select class="selectpicker" data-live-search="true" data-size="7">
  <option>Petr Karel</option>
  <option>Honza Novák</option>
  <option>David Egydy</option>
  <option>Sláva Ková?</option>
  <option>Hana Skalická</option>
  <option>Simona Kolá?ová</option>
  <option>Kate?ina Sychová</option>
  <option>Amálka Sychová</option>
  <option>Jana Sychová</option>
  <option>Magdaléna Sychová</option>
  <option>Tereza Sychová</option>
  <option>Bohdana Sychová</option>
</select>

这是我的JavaScript:

//inicialization of select picker
$('.selectpicker').selectpicker();

//on change function i need to control selected value
$('select.selectpicker').on('change', function(){
   var selected = $('.selectpicker option:selected').val();
   alert(selected);
});

问题

我的问题是改变功能不起作用.它没有做任何事情,我自己找不到解决方案.

如果我把它放入文件准备而不是改变功能它似乎工作.所以我想我在某处犯了错误:

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

我也尝试过只使用:

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

没有这个选择前缀但没有任何变化.

UPDATE

解决方案是将jquery代码放入document.ready().感谢Kartikeya

Answer 1

当Bootstrap Select初始化时,它将构建一组与原始<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 ready事件}

Stack Snippets中的演示:

$(function() {

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

<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
<link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/css/bootstrap-select.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/js/bootstrap-select.js"></script>

<select class="selectpicker">
  <option val="Must"> Mustard </option>
  <option val="Cat" > Ketchup </option>
  <option val="Rel" > Relish  </option>
</select>

解决方案2 - Bootstrap选择自定义事件

正如这个答案所暗示的那样,Bootstrap Select有自己的一组自定义事件,包括changed.bs.select:

select的值更改后触发.它通过事件,clickedIndex,newValue,oldValue.

你可以这样使用:

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

Stack Snippets中的演示:

$(function() {

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

});

<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
<link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/css/bootstrap-select.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/js/bootstrap-select.js"></script>

<select class="selectpicker">
  <option val="Must"> Mustard </option>
  <option val="Cat" > Ketchup </option>
  <option val="Rel" > Relish  </option>
</select>

Answer 2

这就是我做的.

$('.selectpicker').on('changed.bs.select', function (e, clickedIndex, newValue, oldValue) {
    var selected = $(e.currentTarget).val();
});

Answer 3

最简单的解决方案是 -

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

Answer 4

$("#Id").change(function(){
    var selected = $('#Id option:selected').val();
    alert(selected);           
});

我认为这就是您所需要的。