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-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和按钮替换了select，所以你必须按照我在上面显示的那样定位正确的按钮。请注意，您的选择的ID现已移至＆＃39; data-id＆＃39;按钮的属性。

见new fiddle。很抱歉，造型混乱，但功能至少有效。

Answer 2

普通on click无法与bootstrap-plugin一起使用。但是他们有一些关于事件的文档：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");
        });

使用bootstrap-select插件

2 个答案: