Cambiar la opción de y activar eventos con JavaScript

¿Cómo puedo cambiar una opción HTML con JavaScript (sin ninguna biblioteca como jQuery), mientras desencadenar los mismos eventos como si un usuario hubiera hecho el cambio?

Por ejemplo, usando el siguiente código, si cambio la opción con mi mouse, se activa un evento (es decir, se ejecuta onchange ). Sin embargo, cuando cambio la opción usando JavaScript, no se activa ningún evento. ¿Es posible disparar los controladores de eventos asociados como onclick , onchange , etc., cuando se selecciona una opción con JavaScript?

  One Two Three   

http://jsfiddle.net/xwywvd1a/

Lamentablemente, debe activar manualmente el evento de change . Y Event Contructor será la mejor solución.

 var select = document.querySelector('#sel'), input = document.querySelector('input[type="button"]'); select.addEventListener('change',function(){ alert('changed'); }); input.addEventListener('click',function(){ select.value = 2; select.dispatchEvent(new Event('change')); }); 
   

El violín de mi solución está aquí . Pero en caso de que caduque, pegaré el código también.

HTML:

   

JS:

 var sel = document.getElementById('sel'), button = document.getElementById('button'); button.addEventListener('click', function (e) { sel.options[1].selected = true; // firing the event properly according to StackOverflow // http://stackoverflow.com/questions/2856513/how-can-i-trigger-an-onchange-event-manually if ("createEvent" in document) { var evt = document.createEvent("HTMLEvents"); evt.initEvent("change", false, true); sel.dispatchEvent(evt); } else { sel.fireEvent("onchange"); } }); sel.addEventListener('change', function (e) { alert('changed'); }); 

Es tan simple como esto:

 var sel = document.getElementById('sel'); var button = document.getElementById('button'); button.addEventListener('click', function (e) { sel.options[1].selected = true; sel.onchange(); }); 

Pero de esta manera tiene un problema. No puede llamar eventos como lo haría con funciones normales, ya que puede haber más de una función escuchando para un evento, y se pueden configurar de diferentes maneras.

Desafortunadamente, la “forma correcta” de iniciar un evento no es tan fácil porque tienes que hacerlo de manera diferente en Internet Explorer (utilizando document.createEventObject) y Firefox (usando document.createEvent (“HTMLEvents”))

 var sel = document.getElementById('sel'); var button = document.getElementById('button'); button.addEventListener('click', function (e) { sel.options[1].selected = true; fireEvent(sel,'change'); }); function fireEvent(element,event){ if (document.createEventObject){ // dispatch for IE var evt = document.createEventObject(); return element.fireEvent('on'+event,evt) } else{ // dispatch for firefox + others var evt = document.createEvent("HTMLEvents"); evt.initEvent(event, true, true ); // event type,bubbling,cancelable return !element.dispatchEvent(evt); } } 

Todo el proceso de creación y envío funciona, pero como está utilizando el atributo onchange , su vida puede ser un poco más simple:

http://jsfiddle.net/xwywvd1a/3/

 var selEl = document.getElementById("sel"); selEl.options[1].selected = true; selEl.onchange(); 

Si utiliza la API de eventos del navegador (addEventListener, AttachEvent de IE, etc.), necesitará crear y enviar eventos como ya lo han señalado otros.

Prueba esto:

    

Estas preguntas pueden ser relevantes para lo que estás pidiendo:

  • ¿Cómo puedo activar un evento onchange manualmente?

  • Cómo activar un evento en un campo de entrada cambiado con javascript

Aquí están mis pensamientos: puede astackr más de una llamada en su evento onclick como este:

   

También puede llamar a una función para hacer esto.

Si realmente quieres llamar a una función y ambas se comportan de la misma manera, creo que algo así debería funcionar. En realidad, no sigue la mejor práctica de “Las funciones deberían hacer una cosa y hacerlo bien”, pero le permite llamar a una función para que maneje ambas formas de cambiar el menú desplegable. Básicamente paso (valor) en el evento onchange y (nulo, índice de opción) en el evento onclick.

Aquí está el codepen: http://codepen.io/mmaynar1/pen/ZYJaaj

    

Puede disparar el evento manualmente después de cambiar la opción seleccionada en el evento onclick haciendo: document.getElementById("sel").onchange();