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?

This should be working as it is currently coded. As per Chris G above, it works fine in the fiddle he linked. Other than that, you could try on focus instead of on click — Barry Thomas
– Barry Thomas, Commented Jan 26, 2017 at 14:20
I found the "error". Please check my update to the question. It was because of the jquery plugin bootstrap-select. — Gero
– Gero, Commented Jan 26, 2017 at 14:35

Jay McVety · Accepted Answer · 2017-01-26 16:13:34Z

2

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.

edited Jan 26, 2017 at 16:13

answered Jan 26, 2017 at 14:26

Jay McVety

1961 gold badge3 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Gero Over a year ago

I found the "error". Please check my update to the question. It was because of the jquery plugin bootstrap-select. How coul I get it working with the plugin?

Jay McVety Over a year ago

Check my updated answer above for use with the plugin.

Jay McVety Over a year ago

Don't forget to choose an accepted answer or update if the answers provided did not solve the issue.

Gero · Accepted Answer · 2017-01-26 15:00:50Z

1

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

answered Jan 26, 2017 at 15:00

Gero

13.7k29 gold badges71 silver badges112 bronze badges

Collectives™ on Stack Overflow

jquery dropdown menu ITSELF on click with bootstrap-select plugin

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related