Bootstrap-select – 如何触发更改事件
我正在使用Bootstrap 3.0.2和Bootstrap-select插件。
这是我的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); });
问题
我的问题是，更改function将无法正常工作。 它什么都不做，我自己也找不到解决办法。
如果我把它放到文档准备好，而不是改变function，它似乎是工作。 所以我想我有错在某处：
$('select.selectpicker').on('change', function(){
我也试过只用：
$('.selectpicker').on('change', function(){
没有这个select前缀，但没有改变。
UPDATE
解决scheme是将jQuery代码放入document.ready() 。 感谢Kartikeya
所以这个问题可以被标记为已解决，您需要在DOM已经加载之后监听更改事件，否则您可能冒着在侦听器正在寻找它们的位置找不到元素。
在Stack Snippets中演示
$(function() { $('.selectpicker').on('change', function(){ var selected = $(this).find("option:selected").val(); alert(selected); }); });
<link href="ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/> <link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/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.6.3/js/bootstrap-select.js"></script> <select class="selectpicker"> <option>Mustard</option> <option>Ketchup</option> <option>Relish</option> </select>
这就是我所做的。
$('.selectpicker').on('changed.bs.select', function (e, clickedIndex, newValue, oldValue) { var selected = $(e.currentTarget).val(); });
$("#Id").change(function(){ var selected = $('#Id option:selected').val(); alert(selected); });
我认为这是你所需要的。
最简单的解决scheme是 –
$('.selectpicker').trigger('change');
