Formulaire:Listes de sélections Javascript
Un article de WikiTuto.
Sommaire |
Explication
Les listes de sélection sont très utiles afin de permettre un choix restreint de réponses à un visiteur. La liste se crée à partir de la balise <select> et chaque élément qui la compose est précédé de la balise <option>. À l'intérieur de la balise <select>, l'élément size permet de choisir l'apparence de la liste, chaque nombre indique le nombre de choix visible sans avoir à naviguer dans la liste.
L'évènement onchange détecte un changement de sélection de la part de l'utilisateur. onchange peut aussi être utilisé afin de détecter tout changement dans le texte des balises <input/> et <textarea>. Utile pour vérifier si tous les champs obligatoires d'un formulaire ont été remplis.
Exemple
<form name="materiaux">
<select name="liste" size="4"
onchange="document.materiaux.boiteTexte.value=
'materiaux.liste.options[selectedIndex].text';">
<option> asphalte </option>
<option> bardeau </option>
<option> stucco </option>
<option> brique </option>
</select>
<input type="text" name="boiteTexte" value="choix ici"/>
</form>
Il peut être étrange de voir que pour une liste, bien sûr la form possède un nom, mais rien ne différencit les options de la liste. C'est qu'il faut savoir que JavaScript vous permet d'utiliser et règler les options puisqu'elles sont mises dans un vecteur nommé options[].
Alors si on désire changer un choix dans la liste, supposons le deuxième, on peut le faire en modifiant son texte directement dans le vecteur.
Exemple
document.materiaux.liste.options[1].text='* verre *'; Cliquez sur ce lien pour effectuer le changement dans la liste
En plus de la propriété des options, select a une propriété nommée selectedIndex . Quand une option dans un select a été choisie, selectedIndex contient son indice dans le vecteur. Si aucun choix n'a été fait, selectedIndex contient l'indice -1, ceci est pratique pour vérifier dans un formulaire si tous les champs ont été complétés.
Exemple
Pour tester ceci, choisissez un matériel dans la liste des matériaux puis vous aurez son indice en cliquant ici
<a href="" onClick="alert('L\' indice de ce matériel est: ' +
window.document.materiaux.liste.selectedIndex); return false;">
cliquant ici </a>
Il est possible, vous l'aurez deviner, d'utiliser cette méthode pour mettre un choix par défaut et ainsi le sélectionner. Il suffirait de faire quelque chose comme : window.document.materiaux.liste.selectedIndex= 0; En sachant l'indice de l'élément choisi, on peut se servir de l'option de .text pour mettre la valeur choisie dans une variable.
La propriété selectedIndex identifie l'élément d'une liste actuellement sélectionné, la propriété selected est une valeur booléenne qui indique si l'élément demandé est sélectionné et la propriété defaultSelected retourne l'index de l'élément de liste sélectionné par défaut.
Les listes de sélection peuvent être réglées de manière à accepter les sélections multiples (sélection de plusieurs éléments). Pour ce faire, il ne faut qu'ajouter l'attribut multiple dans la balise <select>.
Le reste de la syntaxe de la liste ne diffère pas d'une liste ordinaire. Dans le cas d'une liste à sélection multiples, la propriété selectedIndex retourne le plus petit index de la sélection. Il ne faut pas oublier que les index sont en fait un vecteur, ce qui signifie que le premier élément de la liste a un index de 0.
La propriété selectedIndex est pratique lorsqu'on a qu'une liste. Mais lorsqu'une dépend d'une autre, c'est plus compliqué. Comme nous l'avons vu, les listes de sélection possède comme tous les autres éléments, un handler onchange. Il est appelé chaque fois qu'il y a un changement dans la sélection. Réaliser une liste qui change selon le choix de la première requière l'écriture d'un mini-programme en JavaScript. On va tenter l'expérience ici pour réviser les notions précédentes et comprendre les listes de sélections.
