Javascript 如何从中获取所有选定值？

看起来很奇怪，我找不到这个已经问过了，但它来了

我有一个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>

如何获取所有valuesan阵列？用户在javascript中选择的

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

这似乎是一项非常简单的任务，但我似乎做不到

谢谢。

$'select-mean-type:selected'将包含所有选定项目的数组

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

​

通常的方式：

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

从：

对于元素，.val方法返回一个包含每个选定选项的数组

试试这个：

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

演示

$'select-Mein-type'.changefunction{ var arr=$this.val； console.logarr } 早餐 午餐 晚餐 休闲食品 甜点

---

如果您希望在每个值后使用分隔符来表示

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

---

除非有人问JQuery，否则这个问题应该首先用标准javascript来回答，因为很多人在他们的网站上不使用JQuery

来自RobG：

---

事实上，假设您不需要完全支持IE lte 8，我发现使用纯JavaScript最好、最简洁、最快、最兼容的方法如下：

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

---

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

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

---

需要[].slice.calle.target.selectedOptions，因为e.target.selectedOptions返回的是HTMLCollection，而不是数组。该调用将其转换为数组，这样我们就可以应用map函数来提取值。

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

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

---

我会选择下面这样的方式：

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在某些浏览器上的行为不稳定，因此用户代理嗅探在这里并不是完全不合适。

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

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

这个。。。运算符将iterable HTMLOptionsCollection映射到数组

如果您对这些值感兴趣，可以添加映射调用：

2019年10月更新

以下内容应在所有现代浏览器上独立运行，无需任何依赖项或透明

元素-> const showSelectedOptions=options=>alert […选项].filtero=>o.selected.mapo=>o.value 一 二 三 四 您可以使用selectedOptions属性

var options=document.getElementById'select-mean-type'。selectedOptions； var values=Array.fromoptions.map{value}=>value； console.logvalues； 早餐 午餐 晚餐 休闲食品 甜点 $'application\u student\u groups选项：选中'.toArray.mapitem=>item.value'

---

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

上述用户界面的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);
}

---

可能重复的可能重复的可能重复的可能重复的使用jquery.ha标记，未看到：/still+1所选选项如何？这还不够跨浏览器吗？Array.prototype.map.callel.selectedOptions，functionx{return x.value}注意，如果没有value属性，则opt.value=opt.text.Finally！香草我最喜欢的调味品很遗憾，这不会在任何地方都有效，因为IE11没有字段选择选项。但是，以下操作确实有效：Array.prototype.slice.callfield.querySelectorAll'：checked'或者，如果您有元素：Array.fromelement.queryselectoraloption:checked，e=>e.value；仅供参考，使用selectedOptions/options集合比使用querySelectorAll更快。谢谢@Adamlegett。对于那些不知道的人来说，这将把上面make@Someguynamedpie的代码改为：Array.fromelement.selectedOptions.mapv=>v.value；。它会的，但请看下面我的答案——它在IE上根本不起作用，在一些旧版本的Chrome和Firefox中有奇怪的行为。如果您不关心性能，querySelectorAll或filtering element.options会完成任务。另外，您可以使用[].map.call而不是使用Array.from，我不知道这会对性能产生什么影响，但肯定不会是负面的。used选中了这个选项，在多选下拉列表中对我有效，但应该对所有下拉列表都有效。$多选>选项：选中。每个函数{console.logthis.value}；这个答案值得更多的赞扬。完美的解决方案，谢谢！这是一个非常好的解决方案，选择的选项在一个非常酷的答案中是不受支持的。谢谢一个本地的、无需大惊小怪、非jQuery的答案。谢谢，谢谢你的回答。如果你能补充一点解释，这是如何工作的，以及你为什么认为这是最好的解决方案，那就太好了。谢谢1$“申请\学生\团体”选项：选中“返回se集合”

---

所选对象2.toArray返回数组3中的所选对象，在map中，我返回选项值，或者您可以从数组中返回文本。在我们按照工作方式获得解决方案之前，我们无法判断解决方案是否最佳。这是最好的解决方案，因为它的工作方式，我的工作。希望您了解现代浏览器上纯javascript的最佳答案+1.

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

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

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