Comment obtenir toutes les valeurs sélectionnées dans <select multiple=multiple> ?

Question

Il me semblait étrange de ne pas trouver cette question déjà posée, mais voilà !

J'ai un html comme suit :

<select id="select-meal-type" multiple="multiple">
    <option value="1">Breakfast</option>
    <option value="2">Lunch</option>
    <option value="3">Dinner</option>
    <option value="4">Snacks</option>
    <option value="5">Dessert</option>
</select>

Comment puis-je obtenir toutes les valeurs (un tableau ?) que l'utilisateur a sélectionnées en javascript ?

Par exemple, si l'utilisateur a sélectionné Déjeuner et Collations, je veux un tableau de { 2, 4 }.

Cela semble être une tâche très simple, mais je ne parviens pas à la réaliser.

Gracias.

Answer 1

À moins qu'une question ne demande JQuery, la réponse doit d'abord être donnée en javascript standard, car de nombreuses personnes n'utilisent pas JQuery dans leurs sites.

De RobG Comment obtenir toutes les valeurs sélectionnées d'une boîte de sélection multiple en utilisant JavaScript ? :

  function getSelectValues(select) {
  var result = [];
  var options = select && select.options;
  var opt;

  for (var i=0, iLen=options.length; i<iLen; i++) {
    opt = options[i];

    if (opt.selected) {
      result.push(opt.value || opt.text);
    }
  }
  return result;
}

Answer 2

Comme d'habitude :

var values = $('#select-meal-type').val();

Desde el docs :

Dans le cas de <select multiple="multiple"> les éléments .val() renvoie un tableau contenant chaque option sélectionnée ;

Answer 3

En fait, j'ai trouvé que la meilleure façon, la plus simple, la plus rapide et la plus compatible d'utiliser du JavaScript pur (en supposant que vous n'avez pas besoin de supporter complètement IE lte 8) est la suivante :

var values = Array.prototype.slice.call(document.querySelectorAll('#select-meal-type option:checked'),0).map(function(v,i,a) { 
    return v.value; 
});

MISE À JOUR (2017-02-14) :

Une façon encore plus succincte d'utiliser ES6/ES2015 (pour les navigateurs qui le supportent) :

const selected = document.querySelectorAll('#select-meal-type option:checked');
const values = Array.from(selected).map(el => el.value);

Answer 4

Si vous voulez suivre la voie moderne, vous pouvez le faire :

const selectedOpts = [...field.options].filter(x => x.selected);

Le site ... L'opérateur fait correspondre les itérables ( HTMLOptionsCollection ) dans le tableau.

Si vous n'êtes intéressé que par les valeurs, vous pouvez ajouter une balise map() appeler :

const selectedValues = [...field.options]
                     .filter(x => x.selected)
                     .map(x => x.value);

Answer 5

Vous pouvez utiliser selectedOptions propriété

var options = document.getElementById('select-meal-type').selectedOptions;
var values = Array.from(options).map(({ value }) => value);
console.log(values);

<select id="select-meal-type" multiple="multiple">
    <option value="1">Breakfast</option>
    <option value="2" selected>Lunch</option>
    <option value="3">Dinner</option>
    <option value="4" selected>Snacks</option>
    <option value="5">Dessert</option>
</select>