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

我正在使用 Bootstrap 3.0.2和 启动-选择插件。

下面是我的选择列表 :

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

232886 次浏览
小开

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

BS Select Elements

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

解决方案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>

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

我觉得这就是你需要的。

小开

我就是这么做的。

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

最简单的解决办法就是

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

小开

我的执行

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();
}
});
});
小开

最简单的实现。

<script>
$( ".selectpicker" ).change(function() {
alert( "Handler for .change() called." );
});
</script>

提交答案