JSFiddle - React, Tailwind, and code Playground

by vinishanto

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="ttps://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.2/css/bootstrap-select.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.2/js/bootstrap-select.min.js"></script>
<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 ="1">data-content="<span class='select-label first'>BBBBB</span>"></option>
  </select>
</div>

JavaScript

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

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

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

})