70

我正在使用 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(){

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

更新

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

4

6 回答 6

108

当 Bootstrap Select 初始化时，它将构建一组与原始<select>元素一起运行的自定义 div，并且通常会在两个输入机制之间同步状态。

BS 选择元素

也就是说，在引导选择上处理事件的一种方法是侦听它修改的原始选择上的事件，而不管是谁更新了它。

解决方案 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 就绪事件

堆栈片段中的演示：

$(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 Select 有自己的一组自定义事件，包括changed.bs.select：

在更改选择的值后触发。它通过事件，clickedIndex，newValue，oldValue。

你可以像这样使用它：

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

堆栈片段中的演示：

$(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>

于 2015-01-21T17:38:40.117 回答
33

这就是我所做的。

$('.selectpicker').on('changed.bs.select', function (e, clickedIndex, newValue, oldValue) {
    var selected = $(e.currentTarget).val();
});
于 2016-06-13T04:54:19.947 回答
9

Simplest solution would be -

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

于 2016-08-05T17:40:58.043 回答
8 
$("#Id").change(function(){
    var selected = $('#Id option:selected').val();
    alert(selected);           
});

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

于 2016-02-17T17:21:00.680 回答
3

最简单的实现。

<script>
    $( ".selectpicker" ).change(function() {
        alert( "Handler for .change() called." );
    });
</script>
于 2020-04-04T22:01:08.340 回答
0

我的实现

import $ from 'jquery';

$(document).ready(() => {
  $('#whatDescribesYouSelectInput').on('change', (e) => {
    if (e.target.value === 'Other') {
      $('#whatDescribesYouOtherInput').attr('type', 'text');
      $('#specifyLabel').show();
    } else {
      $('#whatDescribesYouOtherInput').attr('type', 'hidden');
      $('#specifyLabel').hide();
    }
  });
});
于 2019-01-15T16:59:34.343 回答