Como faço para programaticamente alterar uma escolha para que ele dispara seu comportamento onchange?

Question

Isto não 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>

(estou usando dojo, mas isso realmente não importa.)

Answer 1

O nome 'onchange' é um pouco enganosa, a menos que você entenda que uma mudança evento e um valor a ser alterado não são a mesma coisa. Um evento de alteração ocorre quando o usuário altera o valor no navegador. Eu acredito que você pode acionar o evento manualmente chamando dojo.byId('mySel').onchange() após você programaticamente alterar o valor, no entanto. (Talvez seja necessário para realmente definir uma função que chamadas alert, embora. Eu não fiz isso sozinho.)

Answer 2

Isto irá alterar o valor, mas não acionar o evento onchange. Toda vez que você modificar um elemento com JavaScript não vai acionar o evento (o impede de entrar em questões de recursão *).

Se você configurar um manipulador de eventos assim.

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

então você pode chamar isso separadamente, depois de definir o valor de programação.

Nota (*):. Eu não sou um especialista dojo ... então eu estou presumindo que eles não têm "acrescentou" a chamada automática dos manipuladores de eventos quando você definir o valor de JavaScript

Answer 3

Você pode dar uma olhada nessas questões e suas respostas: elas podem ajudar:

• Detectar alterações programáticas em uma caixa de seleção html.
• Como faço para programaticamente forçar uma onchange evento de uma entrada? (com foco na entrada, e não selecionar, mas ainda pode ser útil)

Answer 4

Para quem quer disparar o 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

Você pode acessar o evento 'onPropertyChange' que contém uma propriedade dentro dos argumentos de evento para identificar qual propriedade foi alterada.

Ele detecta tanto 'selectedIndex' e mudanças 'valor' - simplesmente de prova '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');
}

fora do topo da minha cabeça ... (atualmente usando o framework do asp.net js que é bastante um pouco diferente)

Answer 6

Tente atribuir selectedIndex vez.