Получите текущее значение в Selectpicker, используя jQuery в Codeigniter Framework

Question

Я пытался выполнить манипуляцию с DOM, используя значение выбранной опции selectpicker. Я хотел получить значение selectpicker id="service_provider_select", которое будет напечатано первым. Я меняю параметр с помощью selectpicker, и когда я запускаю console.log(input), каждый раз, когда я получаю Dialog в качестве напечатанного значения в консоль. Как я могу получить значение для последнего выбора?

HTML

<select class="selectpicker form-control item_select" id="service_provider_select" name="service_provider_select" data-size="5" data-live-search="true">
        <option value="">Select Sevice Provider</option>
        <option value="Dialog"> Dialog </option>
        <option value="Mobitel"> Mobitel </option>
        <option value="Airtel"> Airtel </option>
        <option value="Hutch"> Hutch </option>
</select>

JAVASCRIPT

<script>
   $(document).ready(function()
   {
      $(".selectpicker").selectpicker();

      $('#service_provider_select').on("click", function()
      {
         input = $('#service_provider_select').val();
         console.log(input);
      });
   });

   var input = "Dialog";

</script>

Answer 1

Я создал рабочий фрагмент для вашей проблемы, который, кажется, работает для меня, посмотрите, работает ли он и для вас.

$(document).ready(function() {
  $(".selectpicker").selectpicker();

  // Fire event on change instead of on click
  $('#service_provider_select').on("change", function() {
    input = $('#service_provider_select').val();
    console.clear();
    console.log(input);
  });
});

var input = "Dialog";

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.14/dist/css/bootstrap-select.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.14/dist/js/bootstrap-select.min.js"></script>

<select class="selectpicker form-control item_select" id="service_provider_select" name="service_provider_select" data-size="5" data-live-search="true">
  <option value="">Select Sevice Provider</option>
  <option value="Dialog"> Dialog </option>
  <option value="Mobitel"> Mobitel </option>
  <option value="Airtel"> Airtel </option>
  <option value="Hutch"> Hutch </option>
</select>