Changer l'option de <select> et déclencher des événements avec JavaScript

Question

Comment puis-je changer l'option d'un HTML avec JavaScript (sans aucune bibliothèque comme jQuery), tout en déclenchant les mêmes événements que si un utilisateur avait effectué le changement ? Par exemple, en utilisant le code suivant, si je change l'option avec ma souris, un événement se déclenche (c'est-à-dire que onchange est exécuté). Cependant, lorsque je change l'option avec JavaScript, aucun événement n'est déclenché. Est-il possible de déclencher les gestionnaires d'événements associés comme onclick, onchange, etc., lorsqu'une option est sélectionnée avec JavaScript ? Un Deux Trois

http://jsfiddle.net/xwywvd1a/

Answer 1

Ces questions peuvent être pertinentes par rapport à ce que vous demandez:

• Comment déclencher manuellement un événement onchange ?

• Comment déclencher un événement dans un champ de saisie modifié avec JavaScript

Voici mes réflexions : Vous pouvez empiler plus d'un appel dans votre événement onclick de cette manière :

  Un
  Deux
  Trois

Vous pourriez également appeler une fonction pour faire cela.

Si vous voulez vraiment appeler une fonction et que les deux se comportent de la même manière, je pense que quelque chose comme ceci devrait fonctionner. Cela ne suit pas vraiment la meilleure pratique selon laquelle "Les fonctions devraient faire une chose et le faire bien", mais cela vous permet d'appeler une fonction pour gérer les deux façons de modifier la liste déroulante. Fondamentalement, je passe (valeur) à l'événement onchange et (null, index de l'option) à l'événement onclick.

Voici le codepen : http://codepen.io/mmaynar1/pen/ZYJaaj

Un
Deux
Trois

doThisOnChange = function( value, optionIndex)
{
    if ( optionIndex != null )
    {
       var option = document.getElementById( "sel" ).options[optionIndex];
       option.selected = true;
       value = option.value;
    }
    alert( "Faites quelque chose avec la valeur : " + value );
}

Answer 2

Html en utilisant Razor:

 @Html.DropDownList("test1", Model.SelectOptionList, new { id = "test1", onchange = "myFunction()" })

Code JS:

function myFunction() {

            var value = document.getElementById('test1').value;

            console.log("il a été changé ! en " + value);
        }

Answer 3

Vous pouvez déclencher l'événement manuellement après avoir changé l'option sélectionnée sur l'événement onclick en faisant : document.getElementById("sel").onchange();