¿Cómo cambio programáticamente una selección para que active su comportamiento de cambio?

Question

Esto no parece estar funcionando:

<select id="mySel" onchange="alert('foo')">
    <option value="a">a</option>
    <option value="b">b</option>
</select>

<script>
dojo.byId('mySel').value = 'b'; // select changes, but nothing is alerted
</script>

(Estoy usando dojo, pero eso realmente no importa)

Answer 1

El nombre 'onchange' es un poco engañoso a menos que comprenda que un evento de cambio y un valor que se cambia no son lo mismo. Un evento de cambio ocurre cuando el usuario cambia el valor en el navegador. Sin embargo, creo que puede activar el evento manualmente llamando a dojo.byId ('mySel'). Onchange () después de cambiar el valor mediante programación. (Sin embargo, es posible que deba definir una función que llame a alert . No lo he hecho yo mismo).

Answer 2

Esto cambiará el valor pero no activará el evento onchange. Cada vez que modifique un elemento con JavaScript, no activará el evento (le impedirá tener problemas de recursión *).

Si configura un controlador de eventos así.

function myHandler(){
  //do whatever stuff here
  changeColor( dojo.byId('mySel') );
}

entonces puede llamar a esto por separado, después de establecer el valor mediante programación.

Nota (*): no soy un experto en dojo ... así que supongo que no han "agregado" la llamada automática de los controladores de eventos cuando establece el valor de JavaScript.

Answer 3

Puede echar un vistazo a estas preguntas y sus respuestas: podrían ayudar:

• Detecta cambios programáticos en un cuadro de selección html.
• ¿Cómo fuerzo programáticamente un cambio? evento en una entrada? (centrado en la entrada, y no en seleccionar, pero aún podría ser útil)

Answer 4

Para cualquiera que quiera activar el evento change usando javascript.

        var evObj = document.createEvent("HTMLEvents");
        evObj.initEvent("change", true, true);
        var elem = document.getElementById('some-id');
        elem.dispatchEvent(evObj);

Answer 5

puede acceder al evento 'onpropertychange' que contiene una propiedad dentro de los argumentos del evento para identificar qué propiedad se modificó.

Detecta los cambios 'selectedIndex' y 'value' - simplemente prueba de caso 'propertyName'

<select id="mySel" onpropertychange="dothis(event);">
    <option value="a">a</option>    
    <option value="b">b</option>
</select>

function dothis(event)
{

    if (event.propertyName == "selectedIndex")
            alert('selection changed');
}

fuera de mi cabeza ... (actualmente usando el framework asp.net js que es bastante diferente)

Answer 6

Intente asignar selectedIndex en su lugar.