使用引导选择插件单击 jquery 下拉菜单 ITSELF答案

【问题标题】：jquery dropdown menu ITSELF on click with bootstrap-select plugin使用引导选择插件单击 jquery 下拉菜单 ITSELF
【发布时间】：2017-06-12 00:55:07
【问题描述】：

我有一个下拉菜单，我想在单击 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 插件获得点击？

【问题讨论】：

对我来说非常好用。 jsfiddle.net/v257kjur
对焦怎么办？
这应该像当前编码的那样工作。根据上面的 Chris G，它在他链接的小提琴中运行良好。除此之外，您可以尝试聚焦而不是点击
我发现了“错误”。请检查我对问题的更新。这是因为 jquery 插件 bootstrap-select。

标签： javascript jquery twitter-bootstrap drop-down-menu bootstrap-select

【解决方案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。很抱歉，样式很乱，但功能至少可以工作。

【讨论】：

我发现了“错误”。请检查我对问题的更新。这是因为 jquery 插件 bootstrap-select。我怎样才能让它与插件一起工作？
检查我上面更新的答案以与插件一起使用。
如果提供的答案没有解决问题，请不要忘记选择已接受的答案或更新。

【解决方案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");
        });

【讨论】：