Liste déroulante (select)

Nous vous présentons ici trois façons d'obtenir la valeur sélectionnée pas une liste déroulante ou élément HTML "select".

Exemple 1

Dans ce premier exemple, les balises "option" n'ont pas d'attribut "value" et la valeur obtenue par la fonction JavaScript correspond au texte de la balise "option" sélectionnée. Si la 3e option est sélectionnée, c'est la chaîne "bleu" qui sera affichée.

  <select id="couleur" onchange="afficher()">
    <option>rouge</option>
    <option>vert</option>
    <option>bleu</option> <------------------ option sélectionnée
    <option>jaune</option>
  </select>

  Sélection : <span id="sortie"></span>

<script>
  
  function afficher() {
    let liste = document.getElementById("couleur");
    let selection = liste.value;
    let sortie = document.getElementById("sortie");
    sortie.innerHTML = selection; -------------------------> bleu
  }

</script>

Exemple 2

Dans ce deuxième exemple, les balises "option" possèdent un attribut "value" (ici il s'agit du code hexadécimal de la couleur). La valeur obtenue par la fonction JavaScript ne sera plus le texte de la balise "option" sélectionnée, mais la valeur de son attribut "value". Si la 3e option est sélectionnée, c'est cette fois la chaîne "#00f" qui sera affichée.

  <select id="couleur" onchange="afficher()">
    <option value="#f00">rouge</option>
    <option value="#0f0">vert</option>
    <option value="#00f">bleu</option> <----- option sélectionnée
    <option value="#ff0">jaune</option>
  </select>

  Sélection : <span id="sortie"></span>

<script>

  function afficher() {
    let liste = document.getElementById("couleur");
    let selection = liste.value;
    
    let sortie = document.getElementById("sortie");
    sortie.innerHTML = selection; -------------------------> #00f
  }

</script>

Exemple 3

Dans ce troisième et dernier exemple, le texte de la balise "option" et celui de l'attribut "value" n'ont plus d'importance, puisque la fonction s'intéresse essentiellement au numéro (indice) de la sélection. Si la 3e option est sélectionnée, c'est simplement le nombre 2 qui sera affiché.

  <select id="couleur" onchange="afficher()">
    <option value="#f00">rouge</option>
    <option value="#0f0">vert</option>
    <option value="#00f">bleu</option> <----- option sélectionnée
    <option value="#ff0">jaune</option>
  </select>

  Sélection : <span id="sortie"></span>

<script>
  
  function afficher() {
    let liste = document.getElementById("couleur");
    let indice = liste.selectedIndex;
    
    let sortie = document.getElementById("sortie");
    sortie.innerHTML = indice; -------------------------------> 2
  }

</script>