¿Cómo obtener todos los valores seleccionados de <select multiple = multiple>?

Parecía extraño que no pudiera encontrar este ya preguntado, ¡pero aquí va!

Tengo un html de la siguiente manera:

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

¿Cómo obtengo todos los valores (¿una matriz?) Que el usuario ha seleccionado en javascript?

Por ejemplo, si el usuario ha seleccionado Almuerzo y bocadillos, quiero una matriz de {2, 4}.

Esto parece que debería ser una tarea muy simple, pero parece que no puedo hacerlo.

Gracias.

La forma habitual:

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

De los documentos :

En el caso de los <select multiple="multiple">elementos, el .val()método devuelve una matriz que contiene cada opción seleccionada;

A menos que una pregunta solicite JQuery, la pregunta debe responderse primero en javascript estándar, ya que muchas personas no usan JQuery en sus sitios.

De RobG ¿Cómo obtener todos los valores seleccionados de un cuadro de selección múltiple usando 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 realidad, encontré que la mejor, más sucinta, rápida y más compatible forma usando JavaScript puro (asumiendo que no necesitas ser totalmente compatible con IE lte 8) es la siguiente:

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

ACTUALIZACIÓN (2017-02-14):

Una forma aún más sucinta usando ES6 / ES2015 (para los navegadores que lo admiten):

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

Si quieres seguir el camino moderno, puedes hacer esto:

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

El ...operador mapea iterable (HTMLOptionsCollection ) a la matriz.

Si solo está interesado en los valores, puede agregar una map()llamada:

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

Primero, use Array.frompara convertir el HTMLCollectionobjeto en una matriz.

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') contendrá una matriz de todos los elementos seleccionados.

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

​

Actualización de octubre de 2019

Lo siguiente debería funcionar de forma "independiente" en todos los navegadores modernos sin dependencias ni transpilación.

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

Prueba esto:

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

Manifestación

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

violín

si lo desea como expresó con descansos después de cada valor;

$('#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 necesita responder a los cambios, puede intentar esto:

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

El [].slice.call(e.target.selectedOptions)es necesario porque e.target.selectedOptionsdevuelve un HTMLCollection, no un Array. Esa llamada lo convierte para Arrayque luego podamos aplicar la mapfunción, que extrae los valores.

Algo como lo siguiente sería mi elección:

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

Es breve, es rápido en los navegadores modernos y no nos importa si es rápido o no en los navegadores con una participación de mercado del 1%.

Tenga en cuenta que selectedOptions tiene un comportamiento inestable en algunos navegadores desde hace unos 5 años, por lo que un rastreo de agente de usuario no está totalmente fuera de lugar aquí.

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

Funciona en todas partes sin 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;
};