Divers

• Coder un chronomètre (timer)
• Calculer une date
• Créer une liste déroulante (select)

Créer une liste déroulante (select)

L'exemple présenté ici montre comment créer dynamiquement une liste déroulante (balise select) à partir de tableaux.

Soit le code HTML de la liste :

<select>
  <option value="frodon">Frodon Sacquet</option>
  <option value="sam">Sam Gamegie</option>
  <option value="merry">Meriadoc Brandebouc</option>
  <option value="pippin">Peregin Touque</option>
</select>

Cette liste peut facilement être crée dynamiquement à partir de tableaux. Le premier tableau contient les valeurs possiblement retournées par le formulaire, le second les valeurs présentées à l'utilisateur :

let listeDeroulante = document.createElement("select");

// valeurs possiblement retournées par le formulaire
let tabValeur = ["frodon", "sam", "merry", "pippin"];

// valeurs présentées à l,utilisateur
let tabTexte  = ["Frodon Sacquet", "Sam Gamegie",
                "Meriadoc Brandebouc", "Peregin Touque"];

for (let i = 0; i < tabValeur.length; i++) {
  let option = document.createElement("option");
  option.value = tabValeur[i];
  option.innerHTML = tabTexte[i];
  listeDeroulante.appendChild(option);
}

document.body.appendChild(listeDeroulante);

Il ne faut surtout pas oublier la dernière ligne, puisque c'est elle qui ajoute la liste à la fin de l'élément body.