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

Semblait bizarre je ne pouvais pas trouver déjà demandé, mais ici il va!

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é dans le javascript?

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

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

Grâce.

InformationsquelleAutor Kyle | 2012-08-06
  1. 72

    La manière habituelle:

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

    De la docs:

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

    • Dois-je demander qu'il soit?
    • vous avez juste erronée quelqu'un qui peut tout de suite comprendre tous les lib jQuery juste avant qu'il se rendre compte qu'il ne devrait pas, sauf si il a vraiment besoin de.
    • la question est taggés avec jQuery. Marquage à une question par une bibliothèque signifie généralement que l'op utilise la bibliothèque et que les réponses faisant usage de la bibliothèque sont les bienvenus. Je serait également en proposer une autre façon de l'Ina porte sur jQuery aujourd'hui? Peut-être. Mais cette question est de plus de 3 ans. Voir aussi le cas des OP commentaire sur la réponse à faire: stackoverflow.com/questions/11821261/...
    • Vous êtes de droite. Il a de sens que si la question est taggés avec jQuery
    • merci!!!!!! fonctionne parfaitement
    InformationsquelleAutor Felix Kling
  2. 107

    À moins qu'une demande de JQuery, la question doit d'abord être répondu en javascript standard que beaucoup de gens ne pas utiliser JQuery dans leurs sites.

    De RobG Comment obtenir toutes les valeurs sélectionnées d'un multiple de sélectionner la zone à 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;
}
    • C'est taggés avec jquery.
    • ha, na pas voir qu' :/ encore +1
    • Qu'en est selectedOptions? N'est-il pas de la croix-navigateur assez? Array.prototype.map.call(el.selectedOptions, function(x){ return x.value })
    • selectedOptions ne fonctionne pas sous IE
    • Notez que lorsqu'il n'y a pas de value attribut, puis opt.value = opt.text.
    • Enfin!!! La vanille... ma saveur préférée
    • Que faire si opt.value == 0? Ne serait pas le résultat alors opt.text? Parfois, si la valeur est un identifiant d'objet (peut-être une ForeignKey), la valeur pourrait être légitimement 0.

    InformationsquelleAutor lvoelk
  3. 26

    En fait, j'ai trouvé la meilleure, la plus succincte, la plus rapide et la plus compatible à l'aide de JavaScript (en supposant que vous n'avez pas besoin de soutenir pleinement lte IE 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):

    Encore de manière plus succincte en utilisant 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);
    • Sinon, si vous avez l'élément: Array.from(element.querySelectorAll("option:checked"),e=>e.value);
    • Juste pour info, il est plus rapide d'utiliser le selectedOptions/collection d'options que l'usage de la querySelectorAll.
    • Merci @AdamLeggett. Pour ceux qui ne connaissent pas, cela changerait faire @Someguynamedpie du code ci-dessus pour: Array.from(element.selectedOptions).map(v=>v.value);.
    • Il le ferait, mais voir ma réponse ci - dessous ne fonctionne pas du tout sur IE et a un comportement étrange dans certaines anciennes versions de Chrome et Firefox. Si vous n'avez pas de soins sur les performances, querySelectorAll ou de l'élément filtrant.les options ne faire le travail. Aussi, vous pouvez faire [].carte.call() au lieu d'utiliser un Tableau.à partir de(), je ne sais pas quel impact cela aurait sur le rendement, mais il a certainement ne voudrais pas être négatif.
    InformationsquelleAutor KyleFarris
  4. 8

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

    InformationsquelleAutor John Conde
  5. 6

    Tout d'abord, utilisez Array.from pour convertir le HTMLCollection objet d'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
    InformationsquelleAutor Hassan
  6. 4

    Essayez ceci:

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

    Démo

    JS:

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

    HTML:

    <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

    InformationsquelleAutor undefined
  7. 3

    si vous voulez que vous 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
})
    InformationsquelleAutor ewroman
  8. 2

    Si vous avez besoin de répondre à des changements, 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 parce que e.target.selectedOptions renvoie une HTMLCollection, pas un Array. Cet appel convertit Array de sorte que nous pouvons alors appliquer le map fonction, qui extrait les valeurs.

    • Malheureusement, cela ne fonctionnera pas partout, s'avère IE11 n'a pas le champ selectedOptions. Le code suivant fonctionne cependant: Array.prototype.slice.call(field.querySelectorAll(':checked'))
    InformationsquelleAutor adlr0
  9. 2

    Si vous voulez le faire d'une façon moderne, vous pouvez le faire:

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

    La ... opérateur de cartes itérable (HTMLOptionsCollection) de la matrice.

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

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

    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;
};
    • Ne fonctionne pas dans IE bord du navigateur
    • J'avais besoin de plus de "Pas de travail", afin de les aider.
    InformationsquelleAutor Paul Cuddihy
  11. 0

    Quelque chose comme ce qui suit est 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 se soucient pas si c'est rapide ou pas le 1% de part de marché des navigateurs.

    Note, selectedOptions a motivé le comportement sur certains navigateurs à partir d'environ 5 ans, donc un agent utilisateur sniff n'est pas totalement hors de la ligne de ici.

    InformationsquelleAutor Adam Leggett