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

Cela a semblé étrange, je n'ai pas trouvé celui-ci déjà demandé, mais c'est parti!

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 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 n'arrive pas à le faire.

Merci.

La manière habituelle:

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

À partir de la documentation :

Dans le cas des <select multiple="multiple">éléments, la .val()méthode renvoie un tableau contenant chaque option sélectionnée;

Sauf si une question demande JQuery, la question doit d'abord être répondue 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;
}

En fait, j'ai trouvé la meilleure façon, la plus succincte, la plus rapide et la plus compatible d'utiliser du JavaScript pur (en supposant que vous n'ayez pas besoin de prendre entièrement en charge 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 manière encore plus succincte d'utiliser ES6 / ES2015 (pour les navigateurs qui le prennent en charge):

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

Si vous voulez opter pour la voie moderne, vous pouvez le faire:

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

L' ...opérateur mappe iterable ( HTMLOptionsCollection) au tableau.

Si vous êtes simplement intéressé par les valeurs, vous pouvez ajouter un map()appel:

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

Tout d'abord, utilisez Array.frompour convertir l' HTMLCollectionobjet en tableau.

let selectElement = document.getElementById('categorySelect')
let selectedValues = Array.from(selectElement.selectedOptions)
        .map(option => option.value) // make sure you know what '.map' does

// you could also do: selectElement.options

$('#select-meal-type :selected') contiendra un tableau de tous les éléments sélectionnés.

$('#select-meal-type option:selected').each(function() {
    alert($(this).val());
});

​

Mise à jour octobre 2019

Ce qui suit devrait fonctionner "autonome" sur tous les navigateurs modernes sans aucune dépendance ni transpilation.

<!-- display a pop-up with the selected values from the <select> element -->

<script>
 const showSelectedOptions = options => alert(
   [...options].filter(o => o.selected).map(o => o.value)
 )
</script>

<select multiple onchange="showSelectedOptions(this.options)">
  <option value='1'>one</option>
  <option value='2'>two</option>
  <option value='3'>three</option>
  <option value='4'>four</option>
</select>

Essaye ça:

$('#select-meal-type').change(function(){
    var arr = $(this).val()
});

Démo

$('#select-meal-type').change(function(){
  var arr = $(this).val();
  console.log(arr)
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

violon

si vous voulez comme vous l'avez exprimé avec des pauses après chaque valeur;

$('#select-meal-type').change(function(){
    var meals = $(this).val();
    var selectedmeals = meals.join(", "); // there is a break after comma

    alert (selectedmeals); // just for testing what will be printed
})

Si vous avez besoin de répondre aux modifications, vous pouvez essayer ceci:

document.getElementById('select-meal-type').addEventListener('change', function(e) {
    let values = [].slice.call(e.target.selectedOptions).map(a => a.value));
})

Le [].slice.call(e.target.selectedOptions)est nécessaire car e.target.selectedOptionsrenvoie a HTMLCollection, pas un Array. Cet appel le convertit en Arrayafin que nous puissions ensuite appliquer la mapfonction, qui extrait les valeurs.

Quelque chose comme ce qui suit serait mon choix:

let selectElement = document.getElementById('categorySelect');
let selectedOptions = selectedElement.selectedOptions || [].filter.call(selectedElement.options, option => option.selected);
let selectedValues = [].map.call(selectedOptions, option => option.value);

C'est court, c'est rapide sur les navigateurs modernes, et nous ne nous soucions pas de savoir si c'est rapide ou non sur les navigateurs à 1% de part de marché.

Notez que selectedOptions a un comportement bancal sur certains navigateurs il y a environ 5 ans, donc un sniff d'agent utilisateur n'est pas totalement hors de propos ici.

Vous pouvez utiliser selectedOptions

var selectedValues = Array.from(document.getElementById('select-meal-type').selectedOptions).map(el=>el.value);
console.log(selectedValues);

<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>

Fonctionne partout sans jquery:

var getSelectValues = function (select) {
    var ret = [];

    // fast but not universally supported
    if (select.selectedOptions != undefined) {
        for (var i=0; i < select.selectedOptions.length; i++) {
            ret.push(select.selectedOptions[i].value);
        }

    // compatible, but can be painfully slow
    } else {
        for (var i=0; i < select.options.length; i++) {
            if (select.options[i].selected) {
                ret.push(select.options[i].value);
            }
        }
    }
    return ret;
};