twitter bootstrap - drop - El evento desencadenante "cambio" en seleccionar usando el complemento de selección de arranque, solo se dispara después del segundo clic

dropdown inside dropdown bootstrap

Question

Así que he estado haciendo formularios de Marketo y luego agregué estilos y ajustes personales para mejorar la UI. Uno de esos ajustes es reemplazar los menús desplegables existentes con bootstrap select (pequeño plugin de JS que los reemplaza).

Las dos selecciones están vinculadas, pero cuando la selección original cambia, requiere que el evento de cambio active alguna lógica condicional que determine si debe mostrarse otra selección. Ahora lo que estoy haciendo es vincular un evento de clic en la selección de arranque y luego intentar disparar el evento de cambio en la selección original, así:

$jQ(''li'').click(function() {

console.log(''LI Should trigger click on DD now.'');
   event = document.createEvent("HTMLEvents");
   event.initEvent("change", true, false);
   input.dispatchEvent(event); 
});

Esto tiene el efecto deseado, pero solo después de un segundo clic en el menú desplegable. Entonces, lo que sucede es que si el usuario selecciona por ejemplo "América" ​​de la selección de arranque, actualiza la selección original y luego debería aparecer otra lista desplegable que contenga "estados", esto solo ocurrirá la segunda vez que haga clic en la selección de arranque. Entonces, si selecciono "América" ​​y luego cualquier otra cosa, el campo de estado solo aparecerá. ¿Alguna idea de por qué sucede eso? Lo mismo se requiere para hacer desaparecer el campo de estado también.

Answer 1

Así que descubrí el problema, porque el evento se estaba disparando antes de que el menú desplegable original tuviera la oportunidad de actualizar su valor, la solución fue envolver la llamada dispatchEvent en un setTimeout.

Así que aquí está (¡en caso de que alguien tropiece con el mismo problema!)

 setTimeout(function() {
 document.getElementById(''Country'').dispatchEvent(new Event(''change'', { ''bubbles'': true }));
 },200);

Como pueden ver, simplemente condensé el código en una sola línea también.