Cambio Opción de y activa eventos con JavaScript

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'));
);

  One
  Two
  Three

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:

  One
  Two
  Three

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.

---

---

Utiliza Nuestro Buscador