web-dev-qa-db-fra.com

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

Semblait étrange je ne pouvais pas trouver celui-ci déjà demandé, mais le voilà!

J'ai un code 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é Lunch et Snacks, je souhaite un tableau de {2, 4}.

Cela semble être une tâche très simple, mais je n'arrive pas à le faire. 

Merci.

javascriptjqueryhtml
55
Kyle

La manière habituelle:

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

De la docs :

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

66
Felix Kling

À moins qu'une question ne demande JQuery, il faut d'abord répondre à la question en javascript standard, car de nombreuses personnes n'utilisent pas JQuery sur leurs sites.

De RobG Comment obtenir toutes les valeurs sélectionnées d'une zone de sélection multiple à l'aide de 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;
}
99
lvoelk

En fait, j'ai trouvé le meilleur, le plus succinct, le plus rapide et le plus compatible en utilisant du JavaScript pur (en supposant que vous n'avez pas besoin de supporter complètement IE lte 8) est le suivant:

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 supportent):

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

$('#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());
});

Le plus grand centre commercial

8
John Conde

Commencez par utiliser Array.from pour convertir l'objet HTMLCollection en un 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
5
Hassan

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
})
3
ewroman

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

3
undefined

Si vous devez réagir 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));
})

La [].slice.call(e.target.selectedOptions) est nécessaire car e.target.selectedOptions renvoie une HTMLCollection et non une Array. Cet appel le convertit en Array afin que nous puissions ensuite appliquer la fonction map, qui extrait les valeurs.

2
adlr0

Si vous voulez aller de la manière moderne, vous pouvez le faire:

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

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

Si les valeurs vous intéressent, vous pouvez ajouter un appel map():

const selectedValues = [...field.options]
                     .filter((x) => x.selected)
                     .map((x)=>x.value);
1
Tomáš Zato

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 bref, 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% du marché.

Notez que selectedOptions a un comportement dérisoire sur certains navigateurs depuis environ 5 ans. Un sniff agent utilisateur n’est donc pas totalement hors ligne ici.

0
Adam Leggett

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;
};
0
Paul Cuddihy