Liste ou menu déroulant
Créons un formulaire avec deux listes déroulantes, permettant de
choisir une saison et un ou plusieurs mois, de cette saison.
C'est un cas où la deuxième liste dépend d'un choix effectué dans
la première.
Nous ajoutons ensuite deux listes pour afficher les propriétés des
objets javascript associés à chaque liste créée par la balise SELECT,
qui sont respectivement:
document.forms.choix.listeSaison
document.forms.choix.listeMois
Nous indiquons ensuite les principales propriétés des objets javascript
de classe Select et Option.
La liste des mois dépend de la liste des saisons et une fonction
javascript est utilisée pour mettre à jour la liste des mois quand
l'internaute modifie le choix de saison. La programmation de cette
fontion est mentionnée.
Le code Html pour le créer
<![CDATA[
<form name="choix">
<table>
<tr><td align="center">
saison:
<select name="listeSaison" onChange="majMois(choix)">
<option value="print" name="premier"> printemps
<option value="été"> été
<option value="automne" selected> automne
<option value="hiver"> hiver
</select>
</tr><td align="center">
mois:
<select name="listeMois" multiple size="3">
<option> septembre
<option selected> octobre
<option selecter> novembre
</select>
</td>
</tr><tr><td>
<br>
<big>objet 'Select' listeSaison</big>
<textarea name="pourSaison" rows="13" cols="35">
champs de l'objet listeSaison
</textarea>
</td><td>
<br>
<big>objet 'Select' listeMois</big>
<textarea name="pourMois" rows="13" cols="35">
</textarea>
</td>
<tr><td align="center">
<input type="button" value="saisons"
onClick="pObjet('document.forms.choix.listeSaison')">
</td><td align="center">
<input type="button" value="mois"
onClick="pObjet('document.forms.choix.listeMois')">
</td>
</tr><tr><td colspan="2" align="center">
En appuyant sur un des boutons la liste de propriétés est mise à jour.
</td>
</tr></table>
</form>
]]>
Objet Select (liste créée par la balise SELECT)
Tout élément de formulaire, créé par la balise SELECT, a les propriétés:
- name
- nom de la liste, fourni par l'attribut name
- form
- le formulaire contenant cette balise SELECT
- length
- nombre d'éléments de la liste, créés par les balises OPTION
- options
- tableau des options
- selectedIndex
- indice de l'élément sélectionné (plus petite valeur 0)
Objet Option (item de liste)
Voici des propriétés d'un objet de classe Option, créé par la balise OPTION.
- name
- nom de l'option (attribut name de la balise OPTION)
- value
- valeur de l'attribut 'value' de la balise OPTION
- text
- texte affiché
- selected
- valeur true ou false, suivant que l'item est sélectionné ou pas
- defaultSelected
- valeur true ou false, suivant que l'item est choisi par défaut
Toutes les
propriétés d'un objet Option.
Programmation Javascript
Voici le texte de la fonction permettant de mettre à jour la liste des
mois, après un choix de saison.
<![CDATA[
function majMois(obj) {
var mois1=new Array("mars","avril","mai");
var mois2=["juin","juillet","aout"];
var mois3=new Array("septembre","octobre","novembre");
var mois4=new Array("décembre","janvier","février");
var mois = new Array(mois1,mois2,mois3,mois4)
var ls=obj["listeSaison"]
var lm=obj["listeMois"]
var s=ls.selectedIndex
// alert( mois[s][0] + " " + mois[s][1] + " " +mois[s][2])
var i;
lm.length=mois[s].length;
for(i=0; i<mois[s].length;i++) lm.options[i].text=mois[s][i];
lm.selectedIndex=-1;
}
]]>
L'appel de cette fonction est lié à l'événement onChange dans la liste
déroulante; voici la création de la liste en Html:
<select name="listeSaison" onChange="majMois(choix)">