SELFHTML

options

Page d'information: vue d'ensemble

vers le bas options: généralités sur l'utilisation
vers le bas Ajouter des nouveaux éléments dans des listes de choix
vers le bas Effacer des éléments d'une liste de choix

Propriétés:

vers le bas defaultSelected (choix par défaut)
vers le bas length (nombre de possibilités de choix)
vers le bas selected (choix actuel)
vers le bas selectedIndex (Index du choix actuel)
vers le bas text (texte du choix)
vers le bas value (valeur du choix)

 vers le bas 

option: généralités sur l'utilisation

Avec l'objet options, qui se situe sous l'objet Autre page d'information elements dans la hiérarchie des objets JavaScript, vous accédez aux Autre page d'information listes de choix d'un formulaire. Vous pouvez accéder à chaque possibilité de choix distincte de la liste de choix.

Les manières suivantes sont à votre disposition pour adresser les options d'une liste de choix avec JavaScript:

Schéma 1 / exemple 1:

document.forms[#].elements[#].options[#].propri�t�
document.forms[#].elements[#].propri�t�

document.forms[0].elements[0].options[4].text = "ineptie";
document.forms[0].elements[0].selectedIndex = 2;

Schéma 2 / exemple 2:

document.nom_formulaire.nom_element.options[#].propri�t�
document.nom_formulaire.nom_element.options.propri�t�

document.formulaire_test.choix.options[4].text = "ineptie";
document.formulaire_test.choix.selectedIndex = 2;

Explication:

Les listes de choix sont des éléments tout à fait normaux du formulaire. Vous adressez donc des listes de choix comme tout autre élément du formulaire:

À cela s'ajoute dans certains cas, pour les listes de choix, la mention options - pour les possibilités de choix distinctes d'une liste de choix. Il y a des propriétés d'objet pour options, pour lesquelles il vous faut mentionner cette mention suivie d'un numéro d'index de l'option de choix désirée. La première possibilité de choix sur la liste a le numéro d'index 0, la deuxième le numéro d'index 1 etc... Les autres propriétés d'objet n'ont pas besoin de la mention options. Pour les exemples de cette page, il est à chaque fois montré comment adresser exactement une propriété de l'objet options.

 vers le hautvers le bas 

JavaScript 1.0Netscape 2.0MS IE 4.0 Ajouter des nouveaux éléments dans des listes de choix

Vous pouvez, dans un JavaScript, ajouter de nouveaux éléments dans une liste de choix ou remplacer des éléments existants par des nouveaux. Pour cela, vous devez créer à l'aide de JavaScript un nouvel objet option et l'affecter à une liste de choix.

Exemple:

Démonstration - nouvelle fenêtre Exemple d'affichage: aperçu

<html><head><title>Test</title>
<script type="text/javascript">
<!--
function ajouter() {
 nouvel_element = new Option(document.formulaire_test.nouveau.value,document.formulaire_test.nouveau.value,false,true);
 document.formulaire_test.choix.options[document.formulaire_test.choix.length] = nouvel_element;
 document.formulaire_test.nouveau.value = "";
}
//-->
</script>
</head><body>
<form name="formulaire_test" action="">
<select name="choix" size="8">
<option>Un �l�ment</option>
</select>
<br>
<input type="text" name="nouveau">
<input type="button" value="Ajouter" onClick="ajouter()">
</form>
</body></html>

Explication:

Dans l'exemple est défini un formulaire contenant une liste de choix avec un élément, un champ de saisie et un bouton. Dans le champ de saisie, l'utilisateur peut entrer des éléments qu'il désire ajouter à la liste de choix. En cliquant sur le bouton, la valeur saisie est prise dans la liste de choix comme élément.

Pour ce faire, la fonction ajouter() est appelée (elle est notée dans l'entête de fichier). Avec la première instruction de cette fonction, un nouvel objet options est créé avec new Option. Comme paramètre est transmis le texte qui doit être affiché dans le nouvel élément de liste. Dans l'exemple, c'est la valeur du champ de saisie rempli par l'utilisateur (document.formulaire_test.nouveau.value). À la fin, vous devez mentionner à quel endroit dans la liste le nouvel élément doit être inséré. Dans l'exemple ci-dessus, le nouvel élément doit être ajouté à la fin de la liste. Pour cela est affecté au nouvel élément un numéro d'index qui est recherché avec la propriété vers le bas length. Vous pouvez toujours utiliser cette syntaxe pour ajouter des éléments de liste à la fin d'une la liste. Supposons cependant que, dans l'exemple ci-dessus, vous vouliez écraser le premier élément de la liste avec le nouveau. Alors la fonction ajouter() devrait voir modifier cette commande:
document.formulaire_test.choix.options[document.formulaire_test.choix.length] = nouvel_element;
comme suit:
document.formulaire_test.choix.options[0] = nouvel_element;
En mentionnant un numéro d'index qui existe déjà dans la liste, vous écrasez donc un élément.

new Option() connaît quatre paramètres dont les trois derniers sont facultatifs.
1. text = texte affiché dans la liste
2. value = valeur de la liste à transmettre (facultatif)
3. defaultSelected = transmettre true quand l'élément doit être l'élément sélectionné par défaut, sinon false (facultatif)
4. selected = transmettre true quand l'élément doit être sélectionné (facultatif)
Opera 5.12 n'interprète pas les deux derniers paramètres, Netscape 6.1 n'interprète pas le dernier.

Attention:

Dans l'Explorer Internet 5.0 vous ne pouvez pas modifier une liste de choix par delà les fenêtres. Le navigateur y réagit par un message d'erreur, voire un plantage. Notez toujours bien pour cette raison la fonction qui modifie dans le même document que la liste et appelez cette fonction le cas échéant par delà les fenêtres.

 vers le hautvers le bas 

JavaScript 1.0Netscape 2.0MS IE 4.0 Effacer des éléments d'une liste de choix

Vous pouvez effacer des éléments en leur attribuant la valeur null. En alternative, il est également possible d'affecter su tableau Options une nouvelle longueur. Cette possibilité n'est cependant pas supportée par Opera 5.12 .

Exemple:

Démonstration - nouvelle fenêtre Exemple d'affichage: aperçu

<html><head><title>Test</title>
<script type="text/javascript">
<!--
function effacer() {
 document.formulaire_test.choix.options[document.formulaire_test.choix.length-1] = null;
}
//-->
</script>
</head><body>
<form name="formulaire_test" action="">
<select name="choix" size="8">
<option>choix 1</option>
<option>choix 2</option>
<option>choix 3</option>
<option>choix 4</option>
<option>choix 5</option>
</select>
<br>
<input type="button" value="effacer" onClick="effacer()">
</form>
</body></html>

Explication:

L'exemple contient un formulaire avec une liste de choix et un bouton. En cliquant sur le bouton, le dernier élément est à chaque fois effacé de la liste de choix. Pour cela, la fonction effacer() est appelée. La première instruction dans la fonction efface un élément de la liste. Pour effacer un élément, donnez le numéro d'index de l'élément à effacer. Dans l'exemple, on a mentionné pour le faire document.formulaire_test.choix.length-1 - c'est le numéro d'index du dernier élément. Vous pouvez aussi bien mentionner 0 pour effacer le premier élément de la liste, 1, pour effacer le deuxième etc... Le processus d'effacement se réalise en affectant la valeur null à l'élément de la liste.

 vers le hautvers le bas 

JavaScript 1.1Netscape 3.0MS IE 4.0lecture/écriture defaultSelected

Sauvegarde si ou qu'une possibilité de choix est sélectionnée par défaut. Les valeurs possibles sont true ou false.

Exemple:

Démonstration - nouvelle fenêtre Exemple d'affichage: aperçu

<html><head><title>Test</title>
<script type="text/javascript">
<!--
function choix_init() {
 for(i=0; i<document.formulaire_test.choix.length; i++)
   if(document.formulaire_test.choix.options[i].defaultSelected == true)
     document.formulaire_test.choix.options[i].selected=true;
}
//-->
</script>
</head><body>
<form name="formulaire_test" action="">
<select name="choix" size="8">
<option>Limoges</option>
<option>Paris</option>
<option>Bastia</option>
<option>Lille</option>
<option selected>Marseille</option>
<option>Lyon</option>
<option>Bordeaux</option>
<option>Brest</option>
</select>
<br>
<input type="button" value="initialiser le choix" onClick="choix_init()">
</form>
</body></html>

Explication:

L'exemple contient un formulaire avec une liste de choix et un bouton. Pour la liste de choix un choix a été présélectionné lors de la définition HTML avec selected. L'utilisateur peut naturellement choisir un autre élément. Si pourtant il clique sur le bouton portant l'inscription "initialiser le choix", l'état original est reconstitué. Pour cela alors que le bouton est cliqué, la fonction choix_init() est appelée. Elle recherche dans une Autre page d'information boucle for pour toutes les possibilités de choix de la liste de choix s'il s'agit pour l'une d'elle d'un choix présélectionné (if(document.formulaire_test.choix.options[i].defaultSelected==true)). Car le choix présélectionné est encore sauvegardé à ce stade même si l'utilisateur a entre temps choisi un autre élément. Quand le choix présélectionné est trouvé, le choix actuel est fixé comme présélection sur la valeur de l'index (document.formulaire_test.choix.options[i].selected=true). Ainsi est reconstitué l'état original.

 vers le hautvers le bas 

JavaScript 1.0Netscape 2.0MS IE 3.0lecture length

Sauvegarde le nombre d'éléments d'une liste de choix

Exemple:

Démonstration - nouvelle fenêtre Exemple d'affichage: aperçu

<html><head><title>Test</title>
</head><body>
<form name="formulaire_test" action="">
<select name="choix" size="8">
<option>Limoges</option>
<option>Paris</option>
<option>Bastia</option>
<option>Lille</option>
<option>Marseille</option>
<option>Lyon</option>
<option>Bordeaux</option>
<option>Brest</option>
</select>
</form>
<script type="text/javascript">
<!--
document.write("Choisissez l'un des  " + document.formulaire_test.choix.length + " �l�ments");
//-->
</script>
</body></html>

Explication:

L'exemple contient un formulaire avec une liste de choix. Sous le formulaire est noté un passage JavaScript. S'il est placé dessous, c'est parce que le code qu'il contient doit être exécuté tout de suite tout en posant comme condition préalable l'existence du formulaire. Avec Autre page d'information document.write() le nombre de possibilités de choix de la liste de choix est écrit de façon dynamique dans le fichier.

 vers le hautvers le bas 

JavaScript 1.0Netscape 2.0MS IE 3.0lecture/écriture selected

Sauvegarde si ou qu'un élément déterminé d'une liste de choix est sélectionné.

Exemple:

Démonstration - nouvelle fenêtre Exemple d'affichage: aperçu

<html><head><title>Test</title>
<script type="text/javascript">
<!--
function verification_choix() {
 if(document.formulaire_test.choix.options[2].selected == true)
 {
  alert("Ce choix n'est pas valable");
  return false;
 }
 return true;
}
//-->
</script>
</head><body>
<form name="formulaire_test" onSubmit="return verification_choix()" action="">
<select name="choix" size="5">
<option>Moli�re</option>
<option>Racine</option>
<option>Jean-Jacques Goldmann</option>
<option>Corneille</option>
<option>Hugo</option>
</select>
<br>
<input type="submit">
</form>
</body></html>

Explication:

L'exemple contient un formulaire avec une liste de choix et un bouton d'envoi pour envoyer le formulaire. Cependant, lors de l'envoi, la fonction verification_choix() est appelée par le gestionnaire d'événement onSubmit= du repère d'ouverture <form>. Le formulaire n'est envoyé que si cette fonction renvoie la valeur true. La fonction vérifie si l'utilisateur n'aurait pas eu l'idée de choisir l'élément avec le numéro d'index 2 (Jean-Jacques Goldmann). Dans ce cas une annonce est faite et la valeur false est renvoyée, ce qui implique que le formulaire n'est pas envoyé. L'utilisateur peut faire un nouveau choix.

Attention:

La propriété selected se différencie de vers le bas selectedIndex par l'adressage de l'élément de liste désiré. Autrement les deux propriétés ont la même tâche.

 vers le hautvers le bas 

JavaScript 1.0Netscape 2.0MS IE 3.0lecture/écriture selectedIndex

Sauvegarde si ou qu'un élément d'une liste de choix est sélectionné. Si rien n'est sélectionné, alors la valeur -1 est sauvegardée dans la propriété.

Exemple:

Démonstration - nouvelle fenêtre Exemple d'affichage: aperçu

<html><head><title>Test</title>
<script type="text/javascript">
<!--
function verification_choix() {
 if(document.formulaire_test.choix.selectedIndex == 2)
  document.formulaire_test.choix.selectedIndex = 0;
}
//-->
</script>
</head><body>
<form name="formulaire_test" action="">
<select name="choix" size="5" onChange="verification_choix()">
<option>Moli�re</option>
<option>Racine</option>
<option>Jean-Jacques Goldmann</option>
<option>Corneille</option>
<option>Hugo</option>
</select>
</form>
</body></html>

Explication:

L'exemple contient un formulaire avec une liste de choix. Dans le repère d'ouverture <select> est noté le gestionnaire d'événement onChange=. Ce qui fait que chaque fois que l'utilisateur fait un choix dans la liste de choix, la fonction verification_choix() est appelée. La fonction vérifie si l'utilisateur n'a pas choisi l'élément avec le numéro d'index 2 (Jean-Jacques Goldmann). Si oui, la fonction choisit automatiquement l'élément avec le numéro d'index 0 (Molière). Ce qui signifie qu'après, la barre de choix pointe sur cet élément. L'utilisateur peut bien sûr faire un nouveau choix.

Attention:

La propriété selectedIndex se différencie de vers le haut selected par l'adressage de l'élément de liste désiré. Autrement les deux propriétés ont la même tâche.

 vers le hautvers le bas 

JavaScript 1.0Netscape 2.0MS IE 3.0lecture/écriture text

Sauvegarde le texte affiché d'un élément de la liste de choix.

Exemple:

Démonstration - nouvelle fenêtre Exemple d'affichage: aperçu

<html><head><title>Test</title>
<script type="text/javascript">
<!--
function verification_choix() {
 if(document.formulaire_test.choix.selectedIndex == 2)
  document.formulaire_test.choix.options[2].text = "Sacha Guitry";
}
//-->
</script>
</head><body>
<form name="formulaire_test" action="">
<select name="choix" size="5" onChange="verification_choix()">
<option>Moli�re</option>
<option>Racine</option>
<option>Jean-Jacques Goldmann</option>
<option>Corneille</option>
<option>Hugo</option>
</select>
</form>
</body></html>

Explication:

L'exemple contient un formulaire avec une liste de choix. Dans le repère d'ouverture <select> le gestionnaire d'événement onChange= est noté. Ce qui fait que chaque fois que l'utilisateur fait un choix dans la liste de choix, la fonction verification_choix() est appelée. La fonction vérifie si l'utilisateur n'a pas choisi l'élément avec le numéro d'index 2 (Jean-Jacques Goldmann). Si oui, la fonction change le texte affiché de cet élément en "Sacha Guitry". La possibilité de choix reste sélectionnée.

Attention:

La modification de la propriété text - comme dans l'exemple ci-dessus - n'est possible que depuis JavaScript 1.1 (Netscape 3.x, l'Explorer Internet MS 4.x). La lecture, par contre, l'est parfaitement depuis JavaScript 1.0.

 vers le hautvers le bas 

JavaScript 1.0Netscape 2.0MS IE 3.0lecture value

Sauvegarde la valeur d'envoi interne d'un élément dans une liste de choix.

Exemple:

Démonstration - nouvelle fenêtre Exemple d'affichage: aperçu

<html><head><title>Test</title>
<script type="text/javascript">
<!--
function verification_choix() {
 for(i=0;i<document.formulaire_test.choix.length;++i)
  if(document.formulaire_test.choix.options[i].selected == true)
   alert(document.formulaire_test.choix.options[i].value);
}
//-->
</script>
</head><body>
<form name="formulaire_test" action="">
<select name="choix" size="5" onChange="verification_choix()">
<option value="Idiot!">Choixaveugle  1</option>
<option value="Cr�tin!">Choixaveugle  2</option>
<option value="D�bile!">Choixaveugle  3</option>
<option value="Vaurien!">Choixaveugle  4</option>
<option value="Bingo - gagn�!">Choixaveugle  5</option>
</select>
</form>
</body></html>

Explication:

L'exemple contient un formulaire avec une liste de choix. Dans les différents repères <option> sont notées avec value= des valeurs d'envoi internes. De plus, dans le repère d'ouverture <select> est noté le gestionnaire d'événement onChange=. Ce qui fait que chaque fois que l'utilisateur fait un choix dans la liste de choix, la fonction verification_choix() est appelée. La fonction recherche dans une Autre page d'information boucle for si pour toutes les possibilités de choix de la liste de choix, le choix correspondant a été sélectionné. Si oui, la valeur d'envoi interne de la possibilité de choix est sortie dans une boite de dialogue.

 vers le haut
page suivante Autre page d'information images
page précédente Autre page d'information elements
 

© 2001 Stefan Münz / © 2003 Traduction Adresse électronique Serge François, 13405@free.fr
Adresse électronique selfhtml@selfhtml.com.fr