我有一个下拉菜单,我想调用一个函数,当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
插件?
最佳答案
根据您更新的代码,您可以通过以下方式获取点击事件:
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 。抱歉,样式困惑,但功能至少有效。
关于javascript - 使用 bootstrap-select 插件单击时 jquery 下拉菜单本身,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41875392/