El paso a paso o código que verás en este artículo es la resolución más sencilla y efectiva que encontramos a esta inquietud o problema.
Solución:
Desafortunadamente, necesita disparar manualmente el change
evento. Y usar Event Constructor 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'));
);
Y, por supuesto, el Event
constructor no es compatible con IE. Por lo tanto, es posible que deba polillenar con esto:
function Event( event, params ) bubbles: false, cancelable: false, detail: undefined ;
var evt = document.createEvent( 'CustomEvent' );
evt.initCustomEvent( event, params.bubbles, params.cancelable, params.detail );
return evt;
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, porque puede haber más de una función escuchando un evento, y se pueden configurar de varias maneras diferentes.
Desafortunadamente, la ‘manera correcta’ de activar un evento no es tan fácil porque tiene que hacerlo de manera diferente en Internet Explorer (usando 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);
Si sostienes algún recelo o capacidad de limar nuestro post te insinuamos ejecutar una crítica y con mucho placer lo estudiaremos.