javascript - con - selectpicker refresh

Bootstrap-select-cómo disparar evento en cambio

Question

Esta pregunta ya tiene una respuesta aquí:

• ¿Por qué jQuery o un método DOM como getElementById no encuentran el elemento? 6 respuestas

Estoy usando Bootstrap 3.0.2 y el complemento Bootstrap-select .

Aquí está mi lista de selección :

<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>

Aquí está mi 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);
});

Problema

Mi problema es que la función de cambio no funcionará. No hace nada, y no puedo encontrar una solución por mí mismo.

Si lo pongo en el documento listo en lugar de cambiar la función, parece estar funcionando. Así que supongo que tengo un error en alguna parte de:

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

También intenté usar solo:

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

sin este prefijo de selección, pero nada cambia.

ACTUALIZAR

La solución es poner código jquery en document.ready() . Gracias a Kartikeya

Answer 1

Por lo tanto, la pregunta puede marcarse como resuelta, debe escuchar los eventos de cambio después de que el DOM se haya cargado; de lo contrario, corre el riesgo de que los elementos no se encuentren en el punto en que el oyente los está buscando.

Demostración en Stack Snippets

$(function() {

  $(''.selectpicker'').on(''change'', function(){
    var selected = $(this).find("option:selected").val();
    alert(selected);
  });
  
});

<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.6.3/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.6.3/js/bootstrap-select.js"></script>

<select class="selectpicker">
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Relish</option>
</select>

Answer 2

$("#Id").change(function(){

                var selected = $(''#Id option:selected'').val();
                alert(selected);

        });

Creo que esto es lo que necesitas.

Answer 3

Esto es lo que hice.

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

Answer 4

La solución más simple sería -

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