Comment est-ce que je change par programme un select pour qu'il déclenche son comportement onchange?

Question

Cela ne semble pas fonctionner:

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

(J'utilise le dojo, mais cela n'a pas vraiment d'importance.)

Answer 1

Le nom 'onchange' est un peu trompeur, à moins que vous ne compreniez qu'un événement de changement et une valeur en cours de modification ne sont pas la même chose. Un événement de modification se produit lorsque l'utilisateur modifie la valeur dans le navigateur. Je pense que vous pouvez déclencher l'événement manuellement en appelant dojo.byId ('mySel'). Onchange () après avoir modifié la valeur par programme, cependant. (Cependant, vous devrez peut-être définir une fonction qui appelle alert . Je ne l’ai pas fait moi-même.)

Answer 2

Cela modifiera la valeur mais ne déclenchera pas l'événement onchange. Chaque fois que vous modifiez un élément avec JavaScript, l'événement n'est pas déclenché (vous empêche d'entrer dans les problèmes de récursivité *).

Si vous configurez un gestionnaire d'événements comme celui-ci.

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

alors vous pouvez appeler cela séparément, après avoir défini la valeur par programmation.

Note (*): Je ne suis pas un expert du dojo ... donc je suppose qu'ils n'ont pas " ajouté " l'appel automatique des gestionnaires d'événements lorsque vous définissez la valeur à partir de JavaScript.

Answer 3

Vous pouvez consulter ces questions et leurs réponses: elles pourraient vous aider:

• Détecter les modifications programmées dans une zone de sélection html.
• Comment forcer par programmation un échange événement sur une entrée? (axé sur la saisie et non sur la sélection, mais peut toujours être utile)

Answer 4

Pour ceux qui souhaitent déclencher l'événement change à l'aide de javascript.

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

Answer 5

vous pouvez accéder à l'événement 'onpropertychange' qui contient une propriété dans les arguments d'événement pour identifier quelle propriété a été modifiée.

Il détecte les modifications "selectedIndex" et "value" - il suffit de tester la casse "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');
}

ça m'est arrivé ... (utilisant actuellement le framework asp.net js qui est assez différent)

Answer 6

Essayez d'attribuer selectedIndex à la place.