jQuery выпадающее меню ITSELF при щелчке с плагином bootstrap-select

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

---

EDIT: Я нашел проблему. Это потому, что я использую плагин под названием bootstrap-selecthttps://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 заменяет выбор с дивами и кнопок, вам нужно будет настроить правильную кнопку, как показано выше. Обратите внимание, что идентификатор вашего выбора теперь переместился в атрибут 'data-id' кнопки.

См. Это new fiddle. Извините, что стилизация запутана, но функциональность работает как минимум.

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