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

Question

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

javascriptjquerytwitter-bootstrapbootstrap-select

79

我使用的是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);
});

问题

我的问题是更改函数不起作用。它什么也不做，我自己找不到解决方案。

如果我把它放在文档准备好的函数(document ready)中，而不是更改函数(change function)中，它似乎工作正常。所以我猜我在某处犯了错误：

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

我也尝试只使用：

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

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

更新

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

- user3690515

10

为什么你不将 jQuery 代码放在 document.ready() 中呢？ - Kartikeya Khosla

6个回答

34

这就是我做的。

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

- s k

另一种解决方案：这种方法无法获取最后一个“未选择”的选项的值，因此请尝试使用此答案。 - Shaiju T

9

最简单的解决方案是 -

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

- Akshay Soni

8

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

我认为这就是您需要的内容。

- Sangri

如何在多选情况下获取所有的值？ - Brian Wiley

4

最简单的实现。

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

- kanarifugl

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

- Cody Elhard

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- KyleMit · Accepted Answer

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

也就是说，处理 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准备就绪事件}

在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：

在选择的值已更改后触发。它通过event、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>