javascript - 使用 bootstrap-select 插件单击时 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>

如果我想在选择 Select A 时执行某些操作，我可以执行以下操作。

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

但是如果单击下拉菜单本身如何触发某些内容呢？我想加载<option>单击下拉菜单本身时包含数据。

以下内容不起作用:

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

<小时/>

编辑:我发现了问题。这是因为我使用了一个名为bootstrap-select的插件https://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 。抱歉，样式困惑，但功能至少有效。