Voici un select simple, c'est une liste d'option comme on peut en voir dans des pages Web :
- Code:
-
[b]Choisissez un animal :[/b]
<br/>
<form>
<select name="maliste">
<option>ours</option>
<option>cheval</option>
<option>tigre</option>
<option>lion</option>
<option>elephant</option>
</select>
</body>
</form>
Pour détecter que l'utilisateur à fait un choix dans une liste d'option, on utilise l'événement :
onchange="mafonction();"<select name="maliste" onchange="mafonction(paramètre);">mafonction() est la fonction personnelle qu'on va utiliser pour traiter le choix de l'utilisateur, on en a vu un exemple dans le tutorial pour ultra débutant et aussi dans le premier tutorial pour débutant.
Il faut savoir que la liste des options est une liste en mémoire où chaque option est référencée par un numéro : 0 pour la première option, 1 pour la deuxième, etc...
Ce numéro de référence est nommé "index", on dit l'index 0 ou l'index 2, etc....
Par exemple l'option cheval dans ma liste est à l'index 1.
Il faut savoir aussi que le mot selectedIndex contient toujours l'index de l'option choisi par l'utilisateur, et donc pour savoir ce qu'a choisi l'utilisateur il suffit de lire ce selectIndex.
La liste des options sur notre exemple se nomme "maliste" mais en mémoire on accède à son contenu par le mot "options" suivi de l'index de l'option voulue :
par exemple :
options[1] pour lire l'option "cheval".
Seulement on y accède pas aussi simplement, on doit aussi indiquer :
La page où se trouve le formulaire :
documentLe nom du formulaire, ici c'est :
formLe nom du select :
malisteLe mot "options" :
options[l'index choisi par l'utilisateur] :
[selectedIndex]et enfin le mot "value" :
valueAvec un point (.) entre chaque, ce qui donne :
- Code:
-
document.form.maliste.options[selectedIndex].value
C'est compliqué d'apparence, mais c'est comme ça :/
Tout ça, c'est donc le choix qu'a fait l'utilisateur, et on voudrait le donner comme paramètre à notre fonction personnelle pour qu'elle le traite à la façon qu'on veut (l'afficher, faire une action, etc...)
C'est lourd, comme truc^^, heureusement il y a le mot "
this" qui peut remplacer :
document.form.maliste.options
Et la ligne devrait donc se réduire à ça :
this[selectedIndex].valueHors c'est pas fini, les concepteurs du langage ont vraiment pas fait simple là^^
selectedIndex est l'index du choix de l'utilisateur d'accord, mais javascript ne sait pas à quoi il fait référence, il faut donc lui préciser
this.selectedIndex ainsi il a le chemin complet vers l'option du composant select qui a été sélectionnée.
On a donc à présent
this[this.selectedIndex].value qui représente le choix fait par l'utilisateur.
On va enfin pouvoir passer ça à notre fonction personnelle.
- Code:
-
onchange="mafonction(this[this.selectedIndex].value);"
Voilà le code entier de la page : - Code:
-
<html>
<title>initiation à javascript</title>
<head>
<script type="text/javascript">
[i]/* ça c'est une fonction personnelle, une fonction que vous ferez à votre façon.
Moi je l'ai nommée t_select() mais chacun son truc hein^^ */
[/i]function t_select(valeur)
{
// Là je ne fais qu'afficher le choix de l'utilisateur mais on pourrait faire une action avec.
alert(valeur);
}
</script>
</head>
<body>
Choisissez un animal :
<br/>
<form>
<select name="liste" onchange="t_select(this[this.selectedIndex].value);">
<option>ours</option>
<option>cheval</option>
<option>tigre</option>
<option>lion</option>
<option>elephant</option>
</select>
</form>
</body>
</html>
Voilà il ne vous reste plus qu'à tester le code complet 
Mar 3 Mar - 21:41