son - eventos navegador javascript

Cambie la opción de<seleccionar> y active eventos con JavaScript

Question

¿Cómo puedo cambiar la opción de HTML <select> con JavaScript (sin bibliotecas como jQuery), mientras se activan los mismos eventos como si un usuario hubiera realizado el cambio?

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

<select id="sel" onchange=''alert("changed")''>
  <option value=''1''>One</option>
  <option value=''2''>Two</option>
  <option value=''3''>Three</option>
</select>
<input type="button" onclick=''document.getElementById("sel").options[1].selected = true;'' value="Change option to 2" />

http://jsfiddle.net/xwywvd1a/

Answer 1

Desafortunadamente, necesitas disparar 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''));
});

<select id="sel" onchange=''alert("changed")''>
  <option value=''1''>One</option>
  <option value=''2''>Two</option>
  <option value=''3'' selected>Three</option>
</select>
<input type="button" value="Change option to 2" />

Y, por supuesto, el constructor de eventos no es compatible con IE. Por lo que es posible que necesites hacer un polyfill con esto

function Event( event, params ) {
    params = params || { bubbles: false, cancelable: false, detail: undefined };
    var evt = document.createEvent( ''CustomEvent'' );
    evt.initCustomEvent( event, params.bubbles, params.cancelable, params.detail );
    return evt;
}

Answer 2

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

HTML:

<select id="sel">
  <option value=''1''>One</option>
  <option value=''2''>Two</option>
  <option value=''3''>Three</option>
</select>
<input type="button" id="button" value="Change option to 2" />

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 
    // http://.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'');
});

Answer 3

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 las funciones normales, ya que puede haber más de una función escuchando un evento, y se pueden configurar de varias maneras diferentes.

Desafortunadamente, la "manera correcta" de desencadenar 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);
    }
}

Answer 4

Estas preguntas pueden ser relevantes para lo que está 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: Puedes acumular más de una llamada en tu evento onclick como este:

<select id="sel" onchange=''alert("changed")''>
  <option value=''1''>One</option>
  <option value=''2''>Two</option>
  <option value=''3''>Three</option>
</select>
<input type="button" onclick=''document.getElementById("sel").options[1].selected = true; alert("changed");'' value="Change option to 2" />

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

Si realmente quieres llamar a una función y ambos se comportan de la misma manera, creo que algo como esto debería funcionar. Realmente 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 manejar 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 código: http://codepen.io/mmaynar1/pen/ZYJaaj

<select id="sel" onchange=''doThisOnChange(this.value)''>
<option value=''1''>One</option>
<option value=''2''>Two</option>
<option value=''3''>Three</option>
</select>
<input type="button" onclick=''doThisOnChange(null,1);'' value="Change option to 2"/>

<script>
doThisOnChange = function( value, optionIndex)
{
    if ( optionIndex != null )
    {
       var option = document.getElementById( "sel" ).options[optionIndex];
       option.selected = true;
       value = option.value;
    }
    alert( "Do something with the value: " + value );
}
</script>

Answer 5

Prueba esto:

<select id="sel">
 <option value=''1''>One</option>
  <option value=''2''>Two</option> 
  <option value=''3''>Three</option> 
  </select> 


  <input type="button" value="Change option to 2"  onclick="changeOpt()"/>

  <script>

  function changeOpt(){
  document.getElementById("sel").options[1].selected = true;

alert("changed")
  }

  </script>

Answer 6

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

Answer 7

Todos los eventos de creación y distribución funcionan, 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 usa la API de eventos del navegador (addEventListener, AttachEvent de IE, etc.), entonces deberá crear y enviar eventos como otros ya lo han señalado.