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

Question

Parecía extraño No pude encontrar este ya pedido, ¡pero aquí va!

que tienen 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 consigo todos los valores (? Una matriz) que el usuario ha seleccionado en javascript?

Por ejemplo, si el usuario ha seleccionado Lunch and Snacks, quiero una matriz de {2, 4}.

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

Gracias.

Answer 1

la forma habitual:

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

Desde el docs:

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

Answer 2

$('#select-meal-type :selected') contendrá una matriz de todos los elementos seleccionados.

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

Answer 3

Prueba esto:

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

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

fiddle

Answer 4

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

Answer 5

A menos que una pregunta es para jQuery, la pregunta debería ser respondida por primera vez en JavaScript estándar ya que muchas personas no utilizan jQuery en sus sitios.

De RobG How to get all selected values of a multiple select box using 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 6

En realidad, he encontrado la mejor manera, la mayoría-sucinta, más rápido y más compatibles que utilizan JavaScript puro (suponiendo que no es necesario para apoyar plenamente 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; 
}); 

UPDATE (02/14/2017):

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

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

Answer 7

Si tiene que responder a los cambios, puedes 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 necesaria porque e.target.selectedOptions devuelve un HTMLCollection, no un Array . Esa llamada lo convierte en Array para que luego podamos aplicar la función map, que extrae los valores.

Answer 8

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