70

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()です。カルティケヤに感謝

4

6 に答える 6

108

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

BSセレクトエレメント

つまり、ブートストラップ選択でイベントを処理する 1 つの方法は、更新者に関係なく、元の選択で変更されたイベントをリッスンすることです。

解決策 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 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 Select カスタム イベント

この回答が暗示しているように、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>

于 2015-01-21T17:38:40.117 に答える
8 
$("#Id").change(function(){
    var selected = $('#Id option:selected').val();
    alert(selected);           
});

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

于 2016-02-17T17:21:00.680 に答える