Accueil    HTML    Balise OPTION
 



balise option  Balise OPTION : Valeur de liste

«  Partie précédente  |  Index  |  Partie suivante  »


  • Tag de fermeture obligatoire | Support :
  • Google Chrome
  • Firefox
  • Internet Explorer
  • Opera
  • Safari



La balise <option> s'utilise spécifiquement à l'intérieur d'une liste : <select>. Elle définit un élément de cette liste dont le libellé se place entre ses tags d'ouverture et de fermeture et peut également lui associer une valeur interne avec l'attribut "value".
Pour sélectionner une valeur de la liste, il faut que son attribut "selected" prenne comme valeur selected. De même pour ignorer explicitement une valeur de la liste et la rendre non sélectionnable, il faut utiliser l'attribut "disabled".
Si aucune valeur n'est sélectionnée, c'est par défaut la première valeur de la liste qui sera affichée.


La balise <option> s'emploie également avec dans le tag <optgroup> qui permet toujours au sein d'une liste de regrouper les éléments en catégories distinctes.

Accès aux valeurs d'une liste déroulante en javascript :



<select id="ListeElement" onchange="VerifListe();">
   <option value="valeur1">Option 1</option>
   <option value="valeur2">Option 2</option>
   <option value="valeur3">Option 3</option>
</select>

<script type="text/javascript">
   var ObjListe = document.getElementById('ListeElement');
   var SelIndex = ObjListe.selectedIndex;
   var SelValue = ObjListe.options[ObjListe.selectedIndex].value;
   var SelText = ObjListe.options[ObjListe.selectedIndex].text;
</script>

L'exemple en application - sélectionner une valeur dans la liste :


Propriétés pour la balise option :




Propriétés Définition Valeurs
disabled Indique que la valeur est désactivée et ainsi non sélectionnable
Non supporté par IE
disabled
label Spécifie un libellé plus court à afficher
Supporté uniquement par IE
Texte
selected Détermine si l'option de la liste est sélectionnée selected
value Valeur transmise au serveur lors de la soumission du formulaire contenant la liste Texte


Exemple d'utilisation de la balise menu :





Liste déroulante avec une valeur sélectionnée par défaut :
<select>
   <option style="color:blue;">Bleu</option>
   <option style="color:grey;">Gris</option>
   <option style="color:yellow;">Jaune</option>
   <option style="color:red;">Rouge</option>
   <option style="color:green;">Vert</option>
   <option style="color:purple;" selected="selected">Violet</option>
<select>

Liste déroulante avec des éléments désactivés (non compatible IE) :
<select>
   <option style="color:blue;" disabled="disabled">Bleu</option>
   <option style="color:grey;">Gris</option>
   <option style="color:yellow;">Jaune</option>
   <option style="color:red;" disabled="disabled">Rouge</option>
   <option style="color:green;">Vert</option>
   <option style="color:purple;" selected="selected">Violet</option>
<select>




Liste déroulante avec une valeur sélectionnée par défaut :



Liste déroulante avec des éléments désactivés (non compatible IE) :