javascript - bootstrap - selectpicker selected

jquery bootstrap selectpicker actualizar las listas en función de la selección de la lista anterior

Question

Tengo tres listas desplegables, una lista se llena en la carga de la página y no cambia. Las listas 2 y 3 pueden cambiar dependiendo de la selección. Esta funcionalidad funciona bien.

He intentado agregar Bootstrap selectpicker a los selectores y puedo ver que está funcionando; desafortunadamente, las listas no se actualizan según la selección. De hecho, creo que "detrás de escena" son como puedo ver las consultas que se están pasando, pero a través de la interfaz no pasa nada.

Parte del HTML:

<!-- SelectPicker -->
<link href=''//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.2/css/bootstrap-select.min.css'' rel=''stylesheet'' type=''text/css''>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>

Los dos primeros DDL son creados a través de php pero son

<select id=''ddl_first_lookup'' onchange=''ajaxFirstOnChange(this.value)'' value='''' class=''selectpicker''></option>
<select id=''ddl_second_lookup'' onchange=''ajaxSecondOnChange(this.value)'' class=''selectpicker''>
<select id="ddl_third_lookup" onchange=''ajaxThirdLookup(this.value)'' class=''selectpicker''></select>

Tengo el siguiente Javascript:

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

Este es el punto en el que descubrí el problema. Intento implementar esto dentro de las funciones de cambio de ajax sin éxito, ni siquiera estoy seguro de que sea correcto.

$(''.selectpicker'').selectpicker(''refresh'');

Soy bastante nuevo en todo esto, así que me gustaría un poco de ayuda.

Answer 1

Cambiar el nombre de clase selectpicker cuando está oculto:

<select name="key" class="selectpicker_oncreate">

Cuando refresca:

$(''.selectpicker_oncreate'').selectpicker(''refresh'');

Answer 2

En mi Ajax successCallBack estoy tratando de manipular la lista desplegable con id como reasonCode basado en dynamicId (valor obtenido del servidor) como se muestra a continuación:

$(''#reasonCode option[value=''+dynamicId+'']'').prop(''selected'', true);

pero desafortunadamente esto no funcionó hasta que agregué otra línea después de esto como se muestra a continuación:

$(''#reasonCode'').selectpicker(''refresh'');

Answer 3

Encontré tu pregunta después de tener el mismo problema. Agregando $(''.selectpicker'').selectpicker(''refresh''); exactamente después de agregar elementos a mi lista hizo el trabajo.
Así que probablemente necesites encontrar el lugar correcto para ponerlo. Tal vez en la parte de éxito de su llamada ajax.

Answer 4

Lo que entendí de mi experiencia con esto hasta ahora -

Si está agregando opciones dinámicamente al menú desplegable, debe llamar a la siguiente función antes de agregar la opción

$(".selectpicker").selectpicker();

Una vez que haya completado las opciones de adición, llame a la siguiente función (si está usando ajax para agregar la opción, coloque esta función en la parte correcta como acaba de responder Athina)

$(''.selectpicker'').selectpicker(''refresh'');

Si se enfrenta a algún problema extraño, como mostrar un menú desplegable, no datos o en algún momento no se muestra correctamente, definitivamente debe haber cometido un error al colocar sobre la función y nada más.

Answer 5

Si el método de actualización no ayuda, intente agregar algún retraso.

    setTimeout(() => {
      jQuery(''.selectpicker'').selectpicker(''refresh'');
    }, 500);