Accueil    HTML    Balise SELECT
 



balise select  Balise SELECT : Liste déroulante

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


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



La balise <select> permet de créer une liste déroulante ou à choix multiples. C'est l'un des différents contrôles utilisables au sein d'un formulaire <form> pour rapatrier des informations (au même titre que les balises button, textarea et input).

Elle encadre les valeurs de la liste qui sont quant à elles définies dans les tags <option>. Le ou les éléments sélectionnés sont reconnus par l'attribut "selected" de leur balise <option>
Il est également possible d'établir des catégories spécifiques au sein d'une liste déroulante à l'aide de la balise <optgroup>.

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 select :




Propriétés Définition Valeurs
disabled Détermine si la liste déroulante est verouillée et donc non modifiable disabled
multiple Autorise la sélection de plusieurs éléments de la liste multiple
name Nom de la liste déroulante Texte
size Indique combien d'éléments sont affichés Nombre


Exemple d'utilisation de la balise select :





Déclaration d'une liste standard avec comme valeur sélectionnée : Terre

<select>
   <option>Mercure</option>
   <option>Vénus</option>
   <option selected="selected">Terre</option>
   <option>Mars</option>
   <option>Jupiter</option>
   <option>Saturne</option>
   <option>Uranus</option>
   <option>Neptune</option>
   <option>Pluton</option>
</select>

Exemple de liste avec utilisation de la balise <optgroup> :

<select>
   <optgroup label="Boissons sans alcool">
      <option>Eaux minérales</option>
      <option>Eaux gazeuses</option>
      <option>Sodas</option>
   </optgroup>
   <optgroup label="Boissons alcolisées">
      <option>Bières</option>
      <option>Vins rouges</option>
      <option>Vins rosés</option>
      <option>Vins blancs</option>
      <option>Saké</option>
   </optgroup>
</select>



Rendu de la liste :


La même liste avec l'attribut multiple autorisé et l'attribut size valant 4 :


Avec l'attribut disabled et de nouvelles valeurs sélectionnées, l'attribut size valant cette fois 9 pour afficher toutes les valeurs :


Enfin un exemple d'utilisation de la balise <optgroup> :