Comment récupérer les valeurs d'un select multiple en JavaScript ?

Réponses rédigées par Antoine

Dernière mise à jour : 2022-03-27 17:50:56

Question

Comment faire pour récupérer les valeurs d'un <select multiple> en JavaScript ?

Réponse

Pour récupérer les valeurs d'un select multiple, en JavaScript, vous pouvez créer un array et le remplir avec une boucle for et la propriété HTMLSelectElement.options.

Dans l'exemple ci-après on crée une fonction qui s'exécute dès lors qu'un changement est détecté dans la sélection, et cela via l'évènement onchange.

Ensuite on définit un tableau vide :

var selection = [];

Puis on parcourt les <option> du menu <select> avec une boucle for ; dès lors que l'une d'entre elle est sélectionnée, c'est à dire qu'elle a l'attribut selected, on ajoute sa valeur (value) au tableau.

Voici un exemple pour récupérer les valeurs sélectionnées d'un menu <select multiple> :

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Comment récupérer les valeurs d'un select multiple en JavaScript ?</title>
</head>
<body>   
<select id="select" multiple>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
</select>
<script>
document.getElementById('select').onchange = function() 
{
  var selection = [];
  for (var option of document.getElementById('select').options)
  {
    if (option.selected) 
    {
      selection.push(option.value);
    }
  }
  alert(selection);
}
</script>
</body>
</html>

Remarque : alert(selection); affiche le contenu du tableau où les valeurs présentes sont séparées par une virgule (1,2,3,4).