Как получить все выбранные значения из <select multiple = multiple>?

Ответ 1

Обычный способ:

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

В docs:

В случае элементов <select multiple="multiple"> метод .val() возвращает массив, содержащий каждый выбранный параметр;

Ответ 2

Если вопрос не задан для JQuery, на первый вопрос должен быть дан ответ в стандартном javascript, так как многие люди не используют JQuery на своих сайтах.

Из RobG Как получить все выбранные значения в поле множественного выбора с использованием 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;
}

Ответ 3

На самом деле, я нашел лучший, самый лаконичный, быстрый и наиболее совместимый способ использования чистого JavaScript (при условии, что вам не нужна полная поддержка IE lte 8):

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

ОБНОВЛЕНИЕ (2017-02-14):

Еще более краткий способ использования ES6/ES2015 (для браузеров, которые его поддерживают):

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

Ответ 4

$('#select-meal-type :selected') будет содержать массив всех выбранных элементов.

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

Ответ 5

Во-первых, используйте Array.from для преобразования объекта HTMLCollection в массив.

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

Ответ 6

Попробуйте следующее:

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

Demo

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

Ответ 7

если вы хотите, как вы выразились с разрывами после каждого значения;

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

Ответ 8

Если вам нужно ответить на изменения, вы можете попробовать следующее:

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

Требуется [].slice.call(e.target.selectedOptions), потому что e.target.selectedOptions возвращает a HTMLCollection, а не Array. Этот вызов преобразует его в Array, чтобы затем применить функцию map, которая извлекает значения.

Ответ 9

Если вы хотите идти по современному пути, вы можете сделать это:

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

Оператор ... отображает итерируемый (HTMLOptionsCollection) массив.

Если вас интересуют только значения, вы можете добавить вызов map():

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

Ответ 10

Работает везде без 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;
};

Ответ 11

Что-то вроде следующего было бы моим выбором:

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

Короче говоря, это быстро в современных браузерах, и нам все равно, быстро это или нет в браузерах с долей рынка 1%.

Обратите внимание, что selectedOptions работает в некоторых браузерах примерно 5 лет назад, поэтому отнюдь, вынюхивание пользовательского агента здесь не полностью исключено.