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

SELFHTML/Quickbar JavaScript 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)

options: 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[#].propriete
document.forms[#].elements[#].propriete

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

Schéma 2 / exemple 2:

document.nomformulaire.nomelement.options[#].propriete
document.nomformulaire.nomelement.options.propriete

document.nomformulaire.choix.options[4].text = "ineptie";
document.nomformulaire.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.nomformulaire.nomelement le nom du formulaire et de l'élément que vous avez mentionnés lors de la définition du formulaire et de l'élément dans les repères HTML correspondants dans l'attribut 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:

<html><head><title>Test</title>
<script language="JavaScript">
function ajouter()
{
 nouveauchoix = new Option(document.formulairetest.nouveau.value);
 document.formulairetest.choix.options[document.formulairetest.choix.length] = nouveauchoix;
 document.formulairetest.nouveau.value = "";
}
</script>
</head><body>
<form name="formulairetest">
<select name="choix" size=8>
<option>Un élément
</select>
<br>
<input name="nouveau">
<input type=button value="ajout" 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.formulairetest.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.formulairetest.choix.options[document.formulairetest.choix.length] =nouveauchoix;
comme suit:
document.formulairetest.choix.options[0] = nouveauchoix;
En mentionnant un numéro d'index qui existe déjà dans la liste, vous écrasez donc un élément.

Effacer des éléments d'une liste de choix

N'est supporté que par Netscape, pour l'Explorer Internet MS le comportement ne peut pas être reconstitué.

Exemple:

<html><head><title>Test</title>
<script language="JavaScript">
function effacer()
{
 document.formulairetest.choix.options[document.formulairetest.choix.length-1] = null;
 history.go(0);
}
</script>
</head><body>
<form name="formulairetest">
<select name="choix" size=8>
<option>choix 1
<option>choix 2
<option>choix 3
<option>choix 4
<option>choix 5
</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.formulairetest.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. Enfin, vous devez exécuter une espèce de rechargement pour actualiser l'affichage. Ce que vous pouvez faire avec la commande history.go(0).

defaultSelected

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

Exemple:

<html><head><title>Test</title>
<script language="JavaScript">
function choixinit()
{
 for(i=0; i<document.formulairetest.choix.length; i++)
   if(document.formulairetest.choix.options[i].defaultSelected == true)
     document.formulairetest.choix.options[i].selected=true;
}
</script>
</head><body>
<form name="formulairetest">
<select name="choix" size=8>
<option>Limoges
<option>Paris
<option>Bastia
<option>Lille
<option selected>Marseille
<option>Lyon
<option>Bordeaux
<option>Brest
</select>
<br>
<input type=button value="initialiser le choix" onClick="choixinit()">
</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 choixinit() 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.formulairetest.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.formulairetest.choix.options[i].selected=true). Ainsi est reconstitué l'état original.

length

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

Exemple:

<html><head><title>Test</title>
</head><body>
<form name="formulairetest">
<select name="choix" size=8>
<option>Limoges
<option>Paris
<option>Bastia
<option>Lille
<option>Marseille
<option>Lyon
<option>Bordeaux
<option>Brest
</select>
</form>
<script language="JavaScript">
document.write("Choisissez l'un des " + document.formulairetest.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:

<html><head><title>Test</title>
<script language="JavaScript">
function Checkchoix()
{
 if(document.formulairetest.choix.options[2].selected == true)
 {
  alert("Ce choix n'est pas valable");
  return false;
 }
 return true;
}
</script>
</head><body>
<form name="formulairetest" onSubmit="return Checkchoix()">
<select name="choix" size=5>
<option>Goethe
<option>Schiller
<option>Jean-Jacques Goldmann
<option>Homère
<option>Lamartine
</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 Checkchoix() est appelée par l'Event-Handler 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 que un élément d'une liste de choix est sélectionné.

Exemple:

<html><head><title>Test</title>
<script language="JavaScript">
function Checkchoix()
{
 if(document.formulairetest.choix.selectedIndex == 2)
  document.formulairetest.choix.selectedIndex = 0;
}
</script>
</head><body>
<form name="formulairetest">
<select name="choix" size=5 onChange="Checkchoix()">
<option>Goethe
<option>Schiller
<option>Jean-Jacques Goldmann
<option>Homère
<option>Lamartine
</select>
</form>
</body></html>

Explication:

L'exemple contient un formulaire avec une liste de choix. Dans le repère d'ouverture <select> est noté l'Event-Handler onChange=. Ce qui fait que chaque fois que l'utilisateur fait un choix dans la liste de choix, la fonction Checkchoix() 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 (Goethe). 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:

<html><head><title>Test</title>
<script language="JavaScript">
function Checkchoix()
{
 if(document.formulairetest.choix.selectedIndex == 2)
  document.formulairetest.choix.options[2].text = "Thomas Mann";
}
</script>
</head><body>
<form name="formulairetest">
<select name="choix" size=5 onChange="Checkchoix()">
<option>Goethe
<option>Schiller
<option>Jean-Jacques Goldmann
<option>Homère
<option>Lamartine
</select>
</form>
</body></html>

Explication:

L'exemple contient un formulaire avec une liste de choix. Dans le repère d'ouverture <select> l'Event-Handler onChange= est noté. Ce qui fait que chaque fois que l'utilisateur fait un choix dans la liste de choix, la fonction Checkchoix() 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 "Thomas Mann". 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:

<html><head><title>Test</title>
<script language="JavaScript">
function Checkchoix()
{
 for(i=0;i<document.formulairetest.choix.length;++i)
  if(document.formulairetest.choix.options[i].selected == true)
   alert(document.formulairetest.choix.options[i].value);
}
</script>
</head><body>
<form name="formulairetest">
<select name="choix" size=5 onChange="Checkchoix()">
<option value="Idiot!">Choixaveugle 1
<option value="Crétin!">Choixaveugle 2
<option value="Débile!">Choixaveugle 3
<option value="Vaurien!">Choixaveugle 4
<option value="Bingo - gagné!">Choixaveugle 5
</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é l'Event-Handler onChange=. Ce qui fait que chaque fois que l'utilisateur fait un choix dans la liste de choix, la fonction Checkchoix() 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.


après:	images
avant:	elements

SELFHTML/Quickbar JavaScript Référence objet