jquery下拉菜單它自己點擊引導選擇插件

Question

我有一個下拉菜單，我想調用一個函數，當點擊dropdown menu ITSELF。我的意思是你點擊下拉菜單<select>的部分，並顯示所有可用的<options>。

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

如果我想要做某些事情時選擇了A，我有以下幾點。

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

但如何觸發下拉菜單本身被點擊的東西？我想在單擊下拉菜單本身時將數據加載到<option>。

下不工作：

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

---

編輯： 我發現這個問題。這是因爲我使用一個名爲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的和按鈕，您將不得不按照上面顯示的正確按鈕。請注意，您選擇的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"); 
     });