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

Bootstrap-select - how to fire event on change

提问by user3690515

I'm using Bootstrap 3.0.2 and the Bootstrap-selectplugin.

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

Here's my select list:

这是我的选择列表：

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

Here's my JavaScript:

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

Issue

问题

My problem is that change function won't work. It doesn't do anything, and I can't find solution by myself.

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

If i put it into document ready instead change function it seems to be working. So i guess i have mistake somewhere in:

如果我将它放入文档就绪而不是更改功能，它似乎可以正常工作。所以我想我在某处有错误：

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

I also tried to use only:

我也尝试只使用：

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

without this select prefix but nothing changes.

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

UPDATE

更新

Solution is putting jquery code into document.ready(). Thanks to Kartikeya

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

回答by KyleMit

When Bootstrap Select initializes, it'll build a set of custom divs that run alongside the original <select>element and will typically synchronize state between the two input mechanisms.

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

Which is to say that one way to handle events on bootstrap select is to listen for events on the original select that it modifies, regardless of who updated it.

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

Solution 1 - Native Events

解决方案 1 - 本地事件

Just listen for a changeeventand get the selected value using javascriptor jQuerylike this:

只需侦听change事件并使用 javascript或jQuery获取所选值，如下所示：

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

^{*NOTE: As with any script reliant on the DOM, make sure you wait for the DOM ready eventbefore executing}

^{*注意：与任何依赖于 DOM 的脚本一样，请确保在执行之前等待DOM 就绪事件}

Demo in 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>

Solution 2 - Bootstrap Select Custom Events

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

As this answer alludes, Bootstrap Select has their own set of custom events, including changed.bs.selectwhich:

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

fires after the select's value has been changed. It passes through event, clickedIndex, newValue, oldValue.

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

And you can use that like this:

你可以像这样使用它：

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

Demo in 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>

回答by s k

This is what I did.

这就是我所做的。

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

回答by Akshay Soni

Simplest solution would be -

最简单的解决方案是 -

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

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

回答by Sangri

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

I think this is what you need.

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

回答by Cody Elhard

My implementation

我的实现

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

回答by kanarifugl

Easiest implementation.

最简单的实施。

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