如何从<select multiple = multiple>获取所有选定的值？

似乎很奇怪，我找不到这个已经问过的东西，但是它来了！

我有一个HTML，如下所示：

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

如何获取用户在javascript中选择的所有值（数组？）？

例如，如果用户选择了“午餐和零食”，则我需要一个{2，4}的数组。

这似乎应该是一个非常简单的任务，但我似乎做不到。

谢谢。

通常的方式：

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

从文档：

对于<select multiple="multiple">元素，该.val()方法返回一个包含每个选定选项的数组；

除非一个问题要求使用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;
}

实际上，我发现使用纯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);

如果您想采用现代方式，可以执行以下操作：

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

的...操作者可迭代映射（HTMLOptionsCollection）到阵列。

如果您只对值感兴趣，可以添加一个map()调用：

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

首先，使用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

$('#select-meal-type :selected') 将包含所有选定项的数组。

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

​

2019年10月更新

以下内容应在所有现代浏览器上“独立”运行，而没有任何依赖性或翻译。

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

试试这个：

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

演示版

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

小提琴

如果您想按每个值后面的分隔符表示；

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

如果需要响应更改，可以尝试以下操作：

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回报HTMLCollection，而不是一个Array。该调用将其转换为，Array以便我们随后可以应用该map函数来提取值。

我将选择以下内容：

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年前的某些浏览器中具有不正常的行为，因此此处的用户代理嗅探并非完全不合时宜。

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