bootstrap-select 顯示的事件未觸發

Question

我正在為我的選擇框使用引導程序選擇。 我想在下拉菜單打開后做一些動作。 我使用了以下代碼，但顯示的事件沒有被觸發。 我也嘗試過更改事件。 沒有什么對我有用。 有人提出了一種方法來做到這一點。

JS

$(function(){
   $('#c_select #hc_id').selectpicker();

   $('#c_select .selectpicker').on('shown.bs.select', function (e) {
    alert('dd');
   });

   $('.selectpicker').on('changed.bs.select', function (e) {
    console.log('ddddddddddd');
   });

})

<div id="c_select">
  <select id="hc_id" name="hc_id" data-focus-off="true" class="selectpicker change-cc" data-container="body" data-live-search="true">
    <option value="0" data-content="<span class='select-label first'>Select </span>"></option>
    <option value="1" data-content="<span class='select-label first'>AAAAAAAAAAA</span>"></option>
    <option value="2" data-content="<span class='select-label first'>BBBBB</span>"></option>
  </select>
</div>

Answer 1

嘗試這個。

$(function(){
   var select = $('#c_select #hc_id').selectpicker();

   select.on('shown.bs.select', function (e) {
    alert('shown');
   });

   select.on('changed.bs.select', function (e) {
    alert('changed');
   });
})

<div id="c_select">
 <select id="hc_id" name="hc_id" data-focus-off="true" class="selectpicker change-cc" data-container="body" data-live-search="true">
   <option value="0" data-content="<span class='select-label first'>Select </span>"></option>
   <option value="1" data-content="<span class='select-label first'>AAAAAAAAAAA</span>"></option>
   <option value="3" data-content="<span class='select-label first'>BBBBB</span>"></option>
  </select>
</div>

這是一個例子https://jsfiddle.net/caliberdev/8pc374xf/

Answer 2

嘗試在焦點上做你的動作

 $('#c_select .selectpicker').on('focus', function (e) {
    alert('dd');
   });