Bootstrap-select - как запустить событие при изменении

Я использую Bootstrap 3.0.2 и плагин Bootstrap-select.

Вот мой список выбора:

<select class="selectpicker" data-live-search="true" data-size="7">
  <option>Petr Karel</option>
  <option>Honza Novák</option>
  <option>David Egydy</option>
  <option>Sláva Kovář</option>
  <option>Hana Skalická</option>
  <option>Simona Kolářová</option>
  <option>Kateřina Sychová</option>
  <option>Amálka Sychová</option>
  <option>Jana Sychová</option>
  <option>Magdaléna Sychová</option>
  <option>Tereza Sychová</option>
  <option>Bohdana Sychová</option>
</select>

Вот мой JavaScript:

//inicialization of select picker
$('.selectpicker').selectpicker();

//on change function i need to control selected value
$('select.selectpicker').on('change', function(){
   var selected = $('.selectpicker option:selected').val();
   alert(selected);
});

вопрос

Моя проблема в том, что функция изменения не будет работать. Это ничего не делает, и я не могу найти решение самостоятельно.

Если я положу его в готовый документ вместо функции изменения, он, кажется, работает. Так что я думаю, что у меня есть ошибка где-то в:

$('select.selectpicker').on('change', function(){

Я также пытался использовать только:

$('.selectpicker').on('change', function(){

без этого выберите префикс, но ничего не изменится.

ОБНОВИТЬ

Решением является размещение кода jquery в document.ready(). Благодаря Картикея

Ответ 1

Когда Bootstrap Select инициализируется, он создаст набор пользовательских div, которые запускаются рядом с исходным элементом <select> и обычно синхронизируют состояние между двумя механизмами ввода.

Это означает, что один из способов обработки событий при выборе начальной загрузки состоит в прослушивании событий в исходном выборе, который он изменяет, независимо от того, кто его обновил.

Решение 1 - Собственные события

Просто прослушайте событие change и получите выбранное значение, используя javascript или jQuery, например так:

$('select').on('change', function(e){
  console.log(this.value,
              this.options[this.selectedIndex].value,
              $(this).find("option:selected").val(),);
});

^{* ПРИМЕЧАНИЕ. Как и в случае любого сценария, зависящего от DOM, перед выполнением убедитесь, что вы ожидаете события готовности DOM.}

Демо-версия в стеке фрагментов:

$(function() {

  $('select').on('change', function(e){
    console.log(this.value,
                this.options[this.selectedIndex].value,
                $(this).find("option:selected").val(),);
  });
  
});

<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
<link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/css/bootstrap-select.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/js/bootstrap-select.js"></script>

<select class="selectpicker">
  <option val="Must"> Mustard </option>
  <option val="Cat" > Ketchup </option>
  <option val="Rel" > Relish  </option>
</select>

Ответ 2

Это то, что я сделал.

$('.selectpicker').on('changed.bs.select', function (e, clickedIndex, newValue, oldValue) {
    var selected = $(e.currentTarget).val();
});

Ответ 3

Самое простое решение -

$('.selectpicker').trigger('change');

Ответ 4

$("#Id").change(function(){
    var selected = $('#Id option:selected').val();
    alert(selected);           
});

Я думаю, что это то, что вам нужно.

Ответ 5

Моя реализация

import $ from 'jquery';

$(document).ready(() => {
  $('#whatDescribesYouSelectInput').on('change', (e) => {
    if (e.target.value === 'Other') {
      $('#whatDescribesYouOtherInput').attr('type', 'text');
      $('#specifyLabel').show();
    } else {
      $('#whatDescribesYouOtherInput').attr('type', 'hidden');
      $('#specifyLabel').hide();
    }
  });
});