La balise select de HTML

La balise select permet de choisir une option dans une liste. Elle est complétée en HTML 5 par la balise menu qui est plus spécialisée pour un menu contextuel ou une barre d'outil.

Tous les éléments HTML peuvent insérer un select sauf <a> et <button>.

La syntaxe de base est: 

<select>
  <option></option>
  ...
</select>

On peut regrouper les options avec des balises optgroup. 

<select>
  <optgroup>
    <option></option>
    ...
  </optgroup>
    ...
</select>

La balise terminale peut être omise pour option et optgroup mais elle est obligatoire pour select.

Attributs propres et hérités

Attribut Valeur Fonction Version
form ID
ID du formulaire auquel associer la balise select.
HTML 5
disabled [disabled]/rien
Etat désactivé ou pas.
 HTML 5
size Entier
Nombre de lignes affichées, une par défaut.
 
multiple [multiple]/rien
Possibilité de sélecter plusieurs options ensemble.
 
length Entier
Nombre d'options dans la liste (lecture seule)
HTML 5
tabindex Entier
Pour les utilisateurs du clavier, indique l'ordre dans lequel les balises optiennent le focus. Si la balise select à la tabindex="2", quand l'utilisateur actionnera la touche de tabulation dans la page, le select sera accessible en second.
 
name Chaîne
Nom pour transmettre les données de formulaire
 

En ce qui concerne les attributs disabled, on peut écrire juste disabled ou disabled="disabled" ou disabled="". De même pour l'attribut multiple. Ceci pour HTML 5.

Si plusieurs options sont selected, l'attribut multiple doit être présent.

Exemple complet d'utilisation

Ce qui correspond au code suivant:

<select size="6" >
    <optgroup label="groupe1">
        <option>Alpha</option>
        <option>Beta</option>
    </optgroup>
    <optgroup label="groupe2">
        <option>Un</option>
        <option>Deux</option>
    </optgroup>
</select>

Utilisation de select en JavaScript

On peut accéder à une balise select et savoir quelle option a été choisie avec JavaScript.
La démo donne une valeur et un contenu aux options. C'est ce dernier qui est affiché. C'est utile dans le cas ou les valeurs utilisées par le script sont différentes de ce qui est affiché.

Lorsque vous choisissez une option, un message d'alerte apparaît qui présente le numéro d'index et la valeur associée.

Code HTML

<select name="select" onchange="updated(this)">
    <option value="1">pomme</option>
    <option value="2">orange</option>
    <option value="3">cerise</option>
</select>

Code JavaScript

function updated(element)
{
    var idx=element.selectedIndex;
    var val=element.options[idx].value;
    var content=element.options[idx].innerHTML;
    alert(val + " " + content);
 }

selectedIndex est un attribut implicite en lecture seule qui indique la position de l'élément choisi.

Au-delà de select

L'élément select a été conservé en HTML 5, mais de nouvelles balises ont été créées pour mieux répondre aux différents cas de figure.
L'élément menu contient une liste d'options qui sont des balises <li> mais il est peu implémenté.
Plus intéressant, on se rapproche du modèle MVC (View Controler) qui sépare la présentation des données, avec la balise datalist, qui associe une liste à différents éléments comme range, alors qu'ils sont séparés dans le corps de la page.
On peut alors plus facilement générer dynamiquement des listes.

© 2010-2012 Xul.fr