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

【问题标题】：How to get all selected values from <select multiple=multiple>?如何从 <select multiple=multiple> 中获取所有选定的值？
【发布时间】：2012-08-03 00:13:59
【问题描述】：

似乎很奇怪，我找不到这个已经问过的问题，但它就在这里！

我有一个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 } 的数组。

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

谢谢。

【问题讨论】：

Get values from multiple selections in SELECT的可能重复
How to get multiple select box values using jquery?的可能重复
How to get all selected values of a multiple select box using JavaScript?的可能重复

标签： javascript jquery html

【解决方案1】：

除非问题要求使用 JQuery，否则应首先使用标准 javascript 回答问题，因为许多人不在他们的网站中使用 JQuery。

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

【讨论】：

它是用 jquery 标记的。
哈哈，没看到：/还是+1
selectedOptions 怎么样？跨浏览器还不够吗？ Array.prototype.map.call(el.selectedOptions, function(x){ return x.value })
注意当没有value属性时，则opt.value = opt.text。
终于！香草……我最喜欢的味道

【解决方案2】：

通常的方式：

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

来自docs：

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

【讨论】：

【解决方案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);

【讨论】：

或者，如果你有这个元素：Array.from(element.querySelectorAll("option:checked"),e=>e.value);
仅供参考，使用 selectedOptions/options 集合比使用 querySelectorAll 更快。
感谢@AdamLeggett。供不知道的人参考，这会将@Someguynamedpie 上面的代码更改为：Array.from(element.selectedOptions).map(v=>v.value);。
它会，但请看下面我的回答 - 它在 IE 上根本不起作用，并且在某些旧版本的 Chrome 和 Firefox 中有奇怪的行为。如果您不关心性能，querySelectorAll 或过滤 element.options 确实可以完成工作。另外，你可以使用 [].map.call() 而不是使用 Array.from()，我不知道这会对性能产生什么影响，但肯定不会是负面的。
使用 checked 这对我有用，在多选下拉列表中，但也适用于所有下拉列表 $(".multiple_select > option:checked").each(function(){ console.log(this.value) });

【解决方案4】：

如果你想走现代路，你可以这样做：

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

... 运算符将可迭代 (HTMLOptionsCollection) 映射到数组。

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

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

【讨论】：

这个答案值得更多的信任。完美的解决方案，谢谢！
这是一个很棒的解决方案
我认为这是今天最好的答案。顺便说一句，您不需要 x 周围的括号。

【解决方案5】：

你可以使用selectedOptions属性

var options = document.getElementById('select-meal-type').selectedOptions;
var values = Array.from(options).map(({ value }) => value);
console.log(values);

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

【讨论】：

一个原生的、简单的、非 jQuery 的答案。谢谢。
这是一个很棒的答案，超级简单明了，甚至可以简化为一行let selectedOptions = Array.from(document.getElementById(selectElem).selectedOptions).map(({ value }) => value);

【解决方案6】：

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

【讨论】：

现代浏览器上纯 JavaScript 的最佳答案。 +1

【解决方案7】：

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

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

【讨论】：

【解决方案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 返回的是HTMLCollection，而不是Array。该调用将其转换为Array，以便我们可以应用map 函数来提取值。

【讨论】：

遗憾的是，这并不适用于任何地方，事实证明 IE11 没有字段 selectedOptions。但是，以下方法确实有效：Array.prototype.slice.call(field.querySelectorAll(':checked'))

【解决方案9】：

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>

【讨论】：

【解决方案10】：

如果你想在每个值后加上中断；

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

【讨论】：

【解决方案11】：

试试这个：

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

fiddle

【讨论】：

【解决方案12】：

我会选择以下内容：

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% 市场份额的浏览器上是否很快。

请注意，从大约 5 年前开始，selectedOptions 在某些浏览器上的行为很不稳定，因此用户代理嗅探在这里并非完全不合时宜。

【讨论】：

【解决方案13】：

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

【讨论】：

selectedOptiongs 在 IE 中不受支持

【解决方案14】：

如果您有多个带有 multiple='multiple' 的选择框，并且您想从每个下拉列表中选择所有选定的选项，请使用此选项 HTML：

<select id='Alphabets'>
    <option value="1">A</option>
    <option value="2">B</option>
    <option value="3">C</option>
</select>

<select id='Alphabets' multiple='multiple'>
    <option value="4">D</option>
    <option value="5">E</option>
    <option value="6">F</option>
</select>
<select id='Alphabets'>
    <option value="7">G</option>
    <option value="8">H</option>
    <option value="9">I</option>
</select>
<select id='Alphabets' multiple='multiple'>
    <option value="10">J</option>
    <option value="11">K</option>
    <option value="12">L</option>
</select>

上述 UI 的 JavaScript：

function show_Alphebets()
{
        var tag =document.querySelectorAll("select");        
        var values="";
        for(var i=1; i<4; i++) {
            if(tag[i].options.length>0)
            for (var option of tag[i].selectedOptions) {                  
                  values+= i+"(multiple)="+option.value+",";
            }
            else values+= i+"="+tag[i].value+",";
        }
        alert(values);
}

【讨论】：

【解决方案15】：

$('#application_student_groups option:selected').toArray().map(item => item.value)

【讨论】：

感谢您的回答。太好了，如果您可以添加一些解释，这是如何工作的以及您认为的原因，这是最好的解决方案。谢谢！
1) $('#application_student_groups option:selected') 返回所选对象的集合 2) .toArray() 返回数组 3 中的所选对象，并在地图中返回选项值（或者您可以返回文本）从数组中我们无法判断一个最佳解决方案，直到我们以我们的工作方式获得解决方案。这对我来说是最好的解决方案，因为它按照我的工作方式工作。希望你能理解