Come posso modificare a livello di programmazione una selezione in modo che attivi il suo comportamento di scambio?

Question

Questo sembra non funzionare:

<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>

(Sto usando dojo, ma non importa davvero.)

Answer 1

Il nome "onchange" è un po 'fuorviante a meno che tu non capisca che un cambiamento evento e un valore che viene modificato non sono la stessa cosa. Un evento di modifica si verifica quando l'utente modifica il valore nel browser. Credo che puoi generare l'evento manualmente chiamando dojo.byId ('mySel'). Onchange () dopo aver modificato il valore a livello di codice, comunque. (Potrebbe essere necessario definire effettivamente una funzione che chiama alert , tuttavia. Non l'ho fatto da solo.)

Answer 2

Questo cambierà il valore ma non genererà l'evento onchange. Ogni volta che modifichi un elemento con JavaScript, non genererà l'evento (ti impedisce di entrare in problemi di ricorsione *).

Se imposti un gestore di eventi in questo modo.

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

quindi puoi chiamarlo separatamente, dopo aver impostato il valore a livello di programmazione.

Nota (*): non sono un esperto di dojo ... quindi presumo che non abbiano aggiunto " " la chiamata automatica dei gestori di eventi quando si imposta il valore da JavaScript.

Answer 3

Potresti dare un'occhiata a queste domande e alle loro risposte: potrebbero aiutare:

• Rileva le modifiche programmatiche in una casella di selezione html.
• Come forzare programmaticamente un scambio evento su un input? (focalizzato sull'input e non selezionare, ma potrebbe essere comunque utile)

Answer 4

Per chiunque cerchi di attivare l'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

è possibile accedere all'evento 'onpropertychange' che contiene una proprietà all'interno degli argomenti dell'evento per identificare quale proprietà è stata modificata.

Rileva le modifiche sia 'selectedIndex' che 'value' - semplicemente test case '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');
}

dalla cima della mia testa ... (attualmente sto usando il framework asp.net js che è abbastanza diverso)

Answer 6

Prova invece ad assegnare selectedIndex.