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