Ajouter une valeur dans un élément select avec JavaScript

Pour créer des listes et des menus en HTML, on utilise les balises select et option. Une option a une valeur assignée à l'attribut value, et un texte correspondant à afficher qui est soit inclus dans la balise, ou assigné à l'attribut label. Dans la forme courte, l'attribut label spécifie le texte à afficher. Si un attribut label est ajouté alors que la balise a la forme longue avec un contenu inclus, c'est la valeur de label qui est affichée et non le contenu inclus. Mais dans tous les cas c'est ce qui est assigné à value qui est envoyé avec les données de formulaire.

Pour utiliser select en JavaScript, et savoir quelle option l'utilisateur a choisie, on utilise l'attribut selectedIndex (défini dans DOM). Vous pouvez connaître la position du sélecteur au moyen de la propriété selectedIndex. La valeur de value correspond à l'option sélectionnée. Dans le cas d'un select unique, si une option est passée à true, elle deviendra automatiquement l'option sélectionnée.

Récupérer la valeur sélectionnée

La valeur sélectionnée est récupérée avec l'attribut "target.value" de l'évènement. Pour savoir quelle option l'utilisateur a choisie, on utilise l'attribut selectedIndex (défini dans DOM). Vous pouvez trouver l'index de l'option sélectionnée. Exemple de code : cliquer sur JavaScript pour afficher le numéro de l'option sélectionnée. Développez et constatez que pour chaque option du select en HTML, vous avez en JavaScript une entrée dans le tableau options. Développez une entrée, vous constatez qu'il y a pas mal de choses.

Si vous utilisez un framework comme Vue.js, le framework peut encore vous simplifier davantage le code grâce à l'attribut "v-model". Il permet de "lier" une valeur au framework. Ainsi, vous avez accès en permanence à sa valeur, qui devient un attribut du framework. On l'ajoute pour cela dans l'attribut "methods". Il faut passer l'évènement en paramètre. Si vous utilisez cet évènement, alors vous devez créer la fonction de changement au sein du framework. Vous pouvez même choisir une option par défaut en l'indiquant dans l'attribut "data". Cette technique est une des utilisations de base du framework. Elle permet de faire interagir plusieurs éléments de la page web entre eux.

Ajouter dynamiquement une option : méthodes

Il y a plusieurs façons de le faire et je vous montre la méthode que je préfère. Pour cela, créez une nouvelle instance de l'objet Option avec un new Option. La vraie écriture de new Option est :

new Option('dmc', 'cmd', defaultSelect, select); defaultSelect et select prennent la valeur de true ou false.

Pour ajouter une option on peut aussi écrire :

document.forms.f.dmc.options[document.forms.f.dmc.options.length] = new Option('dmc','cmd');

Cette façon de procéder est efficace et produit le résultat attendu. Développez le prototype HTMLOptionsCollection et constatez qu'il y a des méthodes pour ajouter des éléments ou les supprimer. document.getElementById('liste') permet de désigner la liste en question. Il s'agit d'un tableau (il possède donc toutes les propriétés d'un tableau JavaScript).

Exemples pratiques

Exemple simple d'ajout via un bouton :

Exemple de code :

Lire aussi: INPI et Micro-Entreprise : Démarches

<form name="f"><select name="dmc">
<option value="Choix 1" selected>Choix 1</option>
<option value="Choix 2">Choix 2</option>
<option value="Choix 3">Choix 3</option>
</select>
<a href="#" onClick="alert(document.forms.f.dmc.options[0].text)"> Avant </a>
<a href="#" onClick="document.forms.f.dmc.options[0].text='dmc'; alert(document.forms.f.dmc.options[0].text)"> Après </a></form>

Idem pour menus aux choix multiples. Exemple avec multiple et parcours des options :

Exemple de code :

<form name="f" multiple size="5"><select name="dmc">
<option value="Choix 1" selected>Choix 1</option>
<option value="Choix 2">Choix 2</option>
<option value="Choix 3">Choix 3</option>
<option value="Choix 4">Choix 4</option>
<option value="Choix 5">Choix 5</option>
</select> <a href="#" onClick="evaluation();">Evaluer.</a></form>

Script d'évaluation (extrait) :

Lire aussi: Comment Calculer la TVA ?

Positionner le sélecteur

Maintenant, vous allez positionner le sélecteur à l'aide du selectedIndex. Il n'est pas possible de le faire directement en attribuant une valeur à -1 à l'objet select. Le problème ici, c'est que le selectedIndex est un entier et pas un tableau. Vous pouvez aussi positionner le sélecteur en vous servant de value. Supprimez le gestionnaire d'événement si besoin.

Compatibilité et pièges

Chez moi, Internet Explorer me fait une grosse erreur "action non conforme" et se ferme. Pour les versions d'Internet Explorer antérieures à IE8, il faut intégrer l'attribut name dans la méthode createElement(). Ce code est valable uniquement si l'attribut multiple de la balise select est absent. Et il faut préciser l'attribut value dans les balises option. Dans le cas contraire, le résultat dépend du navigateur. Certains navigateurs affichent alors le texte contenu entre les balises ouvrantes et fermantes des option.

Pour créer un élément HTML (par exemple un input), nous utilisons la syntaxe suivante. Pour plus de détails, voir le paragraphe [Obsolète] de cette Q/R. //... et vous pouvez les utiliser à votre convenance.

HTML CSS JavaScript Demo: Select Option

Points à retenir

Pour ajouter une option dynamiquement, utilisez new Option(...) et insérez-la dans la collection options.
selectedIndex indique la position de l'option sélectionnée ; value contient sa valeur envoyée.
Dans les formulaires, c'est la valeur de l'attribut value qui est transmise lors de l'envoi.
Si une option a l'attribut selected et que l'utilisateur n'a fait aucun choix, c'est la valeur de cette option qui sera passée.
Avec Vue.js, v-model simplifie la gestion de la valeur et permet de lier la sélection à l'état de l'application.

Tableau récapitulatif : méthodes pour ajouter/accéder

Action	Exemple	Remarque
Ajouter une option	select.options[select.options.length] = new Option('texte','valeur')	new Option('text','value', defaultSelect, select)
Lire valeur	select.value ou event.target.value	Renvoie la valeur de l'option sélectionnée
Lire index	select.selectedIndex	Entier indiquant la position
Positionner sélection	select.selectedIndex = i ou select.value = 'val'	selectedIndex est un entier

Pour faire ce tutoriel, des connaissances HTML sur les formulaires et les champs de formulaires sont nécessaires. Si vous avez besoin, vous avez un tutoriel dans la partie HTML-CSS de ce site ici. Tous droits réservés Developpez LLC. et images sans l'autorisation expresse de Developpez LLC.

balises: