optionNN 2 IE 3 DOM 1

L´objet option représente l´élément option, qui doit toujours être imbriqué dans un élément select. Les références à un objet option utilisent généralement son objet select parent, l'objet option étant traité comme un élément d'un tableau d'options propres à l'objet select. Avec les navigateurs modernes, vous pouvez aussi référencer un objet option directement avec son ID. La propriété disabled (décrite parmi les propriétés partagées précédemment dans ce chapitre) est disponible pour IE 4 et versions ultérieures, ainsi que Netscape 6.

 

Vous pouvez modifier l´ensemble d´options d´un objet select dans les navigateurs à partir de Netscape 3 et Explorer 4 avec un code de compatibilité ascendante qui continue à fonctionner dans les navigateurs plus récents. Si la modification nécessite de remplacer des options existantes avec une liste différente, vous pouvez simplement affecter de nouvelles valeurs aux propriétés text, value et selected de chaque option dans le tableau options de l´objet select. Mais si la liste ne compte pas le même nombre d´options, il vaut mieux supprimer tous les objets option et en insérer de nouveaux. Une fonction de constructeur pour un nouvel objet Option vous permet de créer les objets l´un après l´autre, puis de leur affecter un emplacement dans le tableau options. La syntaxe pour le constructeur est la suivante: 

var newOpt = new Option("text", "value", isDefaultSelectedFlag, 
isSelectedFlag);
 

La fonction suivante illustre les étapes typiques de la réécriture de la liste d´options d´un objet select: 

function setSelect(selectElemObj) {
    // remove existing options
    selectElemObj.options.length = 0;
    // create and assign options, one by one
    selectElemObj.options[0] = new Option("Hercule Poirot", "poirot", false, false);
    selectElemObj.options[1] = new Option("Miss Marple", "marple", false, false);
    ...
}
 

Dans un environnement de production, les valeurs des paramètres du constructeur seraient probablement fournies à la page sous la forme d´un tableau d´objets, permettant l´insertion de nouvelles options au sein d´une boucle for. Pour d´autres façons d´approcher cette t che, reportez-vous à la méthode options.add() (pour IE uniquement) et à la méthode select.add() (pour IE 5 ou les versions ultérieures et Netscape 6 uniquement).

 
Equivalent HTML
  
<option>
 
Référence de modèle d'objet
  
[window.]document.formName.selectName.options[i]
[window.]document.forms[i].elements[i].options[i]
[window.]document.getElementById("elementID")
 
Propriétés spécifiques à l´objet
 
defaultSelectedformindexlabelselectedtextvalue
 
Méthodes spécifiques à l´objet

Aucune.

 
Propriétés de gestionnaire d´événements spécifiques à l´objet

Aucune.

defaultSelectedNN 2 IE 3 DOM 1

Lecture/écriture

Indique si l'attribut selected de l'élément est paramétré dans la balise. Vous pouvez comparer la propriété selected actuelle à defaultSelected pour savoir si l'état du contrôle select a été modifié depuis le chargement du document. La modification de cette propriété n'affecte pas l'état de la propriété selected.

 
Exemple
  
var listItem = document.forms[0].selector.options[2];
if (listItem.selected != listItem.defaultSelected) {
    // process for changed state
}
 
Valeur

Valeur booléenne: true | false.
 
Par défaut

Déterminé par l'attribut de balise HTML.

formNN 6 IE 4 DOM 1

Lecture seule

Renvoie une référence à l'élément form qui contient l'élément select et ses options.

 
Exemple
  
var theForm = document.getElementById("myOption3").form;
 
Valeur

Référence de l'objet form.
 
Par défaut

Aucune.

indexNN 6 IE 3 DOM 1

Lecture seule

Renvoie la valeur d'index à base zéro de l'objet d'option courant à l'intérieur de la collection d'options de l'élément select. La propriété selectedIndex de l'objet select renvoie la valeur d'index de l'option actuellement sélectionnée.

 
Exemple
  
var whichItem = document.getElementById("myOption3").index;
 
Valeur

Nombre entier.
 
Par défaut

Aucune.

labelNN 6 IE 5(Mac)/6(Win) DOM 1

Lecture/écriture

Représente l´attribut label de l'élément option. Cette propriété est conçue pour être utilisée avec les menus hiérarchiques, mais elle n´est opérationnelle que dans IE 5 pour Mac, où elle renvoie la même valeur que la propriété text.

 
Valeur

Chaîne.
 
Par défaut

Aucune.
selectedNN 2 IE 3 DOM 1

Lecture/écriture

Indique si l'option de liste a été sélectionnée par l'utilisateur, ce qui signifie que sa valeur est envoyée avec le formulaire. Des scripts peuvent modifier la valeur pour sélectionner un élément sur la base d'un algorithme. Pour identifier l'option sélectionnée, il est plus efficace d'utiliser la propriété selectedIndex de l'objet sélectionné, que de rechercher dans toutes les options celles dont les propriétés sélectionnées sont vraies. L'exception à ce principe se présente lorsque l'élément select est paramétré pour permettre plusieurs sélections, auquel cas vous devez les parcourir toutes pour trouver les éléments choisis.

 
Exemple
  
document.forms[0].selectList.options[3].selected = true;
 
Valeur

Valeur booléenne: true | false.
 
Par défaut

false
textNN 2 IE 3 DOM 1

Lecture/écriture

Fournit le texte associé à l'élément option. Le texte figurant entre les balises de début et de fin est ce qui s'affiche dans l'élément select à l'écran. Il est possible de stocker, récupérer et modifier une valeur masquée associée à l'élément de list via la propriété value.

 
Exemple
  
var list = document.forms[0].selectList;
var listItemText = list.options[list.selectedIndex].text;
 
Valeur

Chaîne.
 
Par défaut

Aucune.

valueNN 4 IE 4 DOM 1

Lecture/écriture

Fournit la valeur associée à l'élément option. Si un attribut value ou une propriété value sont définis pour l'élément option, c'est cette valeur qui est renvoyée comme propriété value; sinon, la propriété renvoie une chaîne vide.

 
Exemple
  
var itemValue = document.forms[0].selectList.options[2]value;
 
Valeur

Chaîne.
 
Par défaut

Aucune.