SELFHTML: JavaScript / Référence objet / options

SELFHTML/Aides à la navigation

JavaScript/DOM

Référence objet

options

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

Propriétés:

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

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

Avec l'objet options, qui se situe sous l'objet elements dans la hiérarchie des objets JavaScript, vous accédez aux 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:

avec un numéro d'index (comme dans le schéma 1 /exemple 1)
Pour l'utilisation de numéros d'index, mentionnez document.forms suivi, entre crochets, du numéro d'ordre du formulaire que vous voulez adresser dans le fichier. Pensez que le compteur commence à 0, c'est à dire qu'il vous faut adresser le premier formulaire avec forms[0], le deuxième avec forms[1] etc... Pour compter, prévaut l'ordre dans lequel les commandes <form> sont notées dans le fichier. Puis suit la mention elements, à la suite de laquelle vous notez à nouveau un numéro d'index entre crochets. Là aussi, le compteur commence à 0, c'est à dire que le premier élément d'un formulaire a le numéro d'index 0, le deuxième le numéro d'index 1 etc... Vous devez rechercher là le numéro d'index de la liste de choix désirée.
avec le nom du formulaire (comme dans le schéma 2 /exemple 2
Pour cela, mentionnez avec document.nom_formulaire.nom_element le nom du formulaire et de l'élément que vous avez mentionnés lors de la définition du formulaire et de la liste de choix dans les repères HTML correspondants dans l'attribut <form name=> et <select name=>.

À 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.

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:

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é 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.

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:

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.

defaultSelected

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

Exemple:

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 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.

length

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

Exemple:

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 document.write() le nombre de possibilités de choix de la liste de choix est écrit de façon dynamique dans le fichier.

selected

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

Exemple:

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 selectedIndex par l'adressage de l'élément de liste désiré. Autrement les deux propriétés ont la même tâche.

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:

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 selected par l'adressage de l'élément de liste désiré. Autrement les deux propriétés ont la même tâche.

text

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

Exemple:

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.

value

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

Exemple:

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 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.


	images
	elements

SELFHTML/Aides à la navigation

JavaScript/DOM

Référence objet