web-dev-qa-db-ja.com

Bootstrap-select-変更時にイベントを発生させる方法

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

このselectプレフィックスなしで、何も変わりません。

更新

解決策は、jqueryコードをdocument.ready()に入れることです。 Kartikeya に感謝

javascriptjquerytwitter-bootstrapbootstrap-select
50
user3690515

Bootstrap Selectが初期化されると、元の<select>要素と共に実行されるカスタムdivのセットが構築され、通常は2つの入力メカニズム間で状態が同期されます。

BS Select Elements

つまり、bootstrap selectでイベントを処理する1つの方法は、誰が更新したかに関係なく、変更する元のselectでイベントをリッスンすることです。

解決策1-ネイティブイベント

changeイベント をリッスンし、選択した値を取得します javascriptを使用 または jQuery

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

* NOTE：DOMに依存するスクリプトと同様に、実行する前に DOM readyイベント を待つようにしてください

スタックスニペットのデモ：

$(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を含む、独自の カスタムイベント のセットがあります。

選択の値が変更された後に発生します。イベント、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>
80
KyleMit

これは私がやったことです。

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

最も簡単な解決策は-

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

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

これが必要なものだと思います。

2
Sangri

私の実装

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