jquery dropdown menu ITSELF on click with bootstrap-select plugin

Question

I have a dropdown menu and I want to call a function, when the dropdown menu ITSELF is clicked. I mean the part where you click on the dropdown menu <select> and all the available <options> are displayed.

<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>

If I want to do something when Select A has been selected, I have the following.

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

But how to trigger something if the dropdown menu itself is clicked? I would like to load the <option> with data when the dropdown menu itself is clicked.

The following is not working:

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

---

EDIT: I found the problem. It is because I use a plugin called bootstrap-select https://silviomoreto.github.io/bootstrap-select/

If I remove class="selectpicker show-tick" data-live-search="true" it works!

But how do I get on click working with the bootstrap-select plugin?

Answer 1

Based on your updated code, you can get the click event via the following:

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

Because BootstrapSelect replaces the select with divs and buttons, you'll have to target the correct button as I show above. Note that the ID of your select has now moved into the 'data-id' attribute of the button.

See this new fiddle . Sorry that the styling is messed but the functionality works at least.

Answer 2

The normal on click did not work with the bootstrap-plugin. But they have some documentation regarding events: 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");
        });