jqueryドロップダウンメニューブートストラップ選択プラグインでクリック時のITSELF

Question

私はドロップダウンメニューを持っており、dropdown menu ITSELFがクリックされたときに関数を呼び出したいと思います。つまり、ドロップダウンメニュー<select>をクリックした部分と利用可能なすべての<options>が表示されます。私がセレクトAが選択されているときに何かをしたい場合は

<select id="p1" title="Select a thing" class="selectpicker show-tick" data-live-search="true"> 
    <option data-hidden="true"></option> 
    <option>Select A</option> 
    <option>Select B</option> 
</select> 

、私は以下のものを持っています。

$('#p1').change(function(event) { 
    console.log("You selected an option"); 
}); 

しかし、ドロップダウンメニュー自体をクリックすると、何かをトリガーする方法はありますか？私はドロップダウンメニュー自体がクリックされたときに<option>のデータをロードしたいと思います。次

が動作していません。

$("#p1").click(function(){ 
    console.log("Loading <options>"); 
}); 

---

EDIT： 私は問題を発見します。 bootstrap-selecthttps://silviomoreto.github.io/bootstrap-select/

私がclass="selectpicker show-tick" data-live-search="true"を削除した場合、それは動作するプラグインを使用しているためです。

しかし、bootstrap-selectプラグインを使用してクリックを開始するにはどうすればよいですか？次を経由してクリックイベントを取得することができ、あなたの更新されたコードに基づいて

Answer 1

、：

HTML：

<select id="p1" title="Select a procedure" class="selectpicker show-tick" data-live-search="true"> 
    <option data-hidden="true"></option> 
    <option>Select A</option> 
    <option>Select B</option> 
</select> 

のjQuery：

$('.bootstrap-select > button[data-id="p1"]').on('click', function (e) { 
    console.log('clicked select'); 
}); 

BootstrapSelectはdivタグで選択を置き換えているためと上記のように正しいボタンをターゲットにする必要があります。 selectのIDがボタンの 'data-id'属性に移動しました。

これを参照してくださいnew fiddle。申し訳ありませんが、スタイリングは乱れていますが、機能は少なくとも動作します。

Answer 2

通常のon clickは、ブートストラッププラグインでは機能しませんでした。しかし、彼らはイベントに関するいくつかの文書を持っています：https://silviomoreto.github.io/bootstrap-select/options/#events

//on click 
$('#p1').on('show.bs.select', function (e) { 
      console.log("hidden.bs.select means on click"); 
     });