如何获取多选框中所有选定的值？

Question

我有一个带有<select>标签且带有multiple属性的元素。如何使用JavaScript获取此元素的选定值？

以下是我的尝试：

function loopSelected() { 
    var txtSelectedValuesObj = document.getElementById('txtSelectedValues');
    var selectedArray = new Array();
    var selObj = document.getElementById('slct'); 
    var i;
    var count = 0;
    for (i=0; i<selObj.options.length; i++) { 
        if (selObj.options[i].selected) {
            selectedArray[count] = selObj.options[i].value;
            count++; 
        } 
    } 
    txtSelectedValuesObj.value = selectedArray;
}

- TKV

---

你有写过任何代码吗？如果有的话，那么帮助起来会很容易 :) - Nobita

大多数问题已经过时了，这是目前最短的路径：https://dev59.com/xHoPtIcB2Jgan1zn3MGF#73949951 - Basj

Answer 1

不使用jQuery：

// Return an array of the selected opion values
// select is an HTML select element
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;
}

一个快速的例子：

<select multiple>
  <option>opt 1 text
  <option value="opt 2 value">opt 2 text
</select>
<button onclick="
  var el = document.getElementsByTagName('select')[0];
  alert(getSelectValues(el));
">Show selected values</button>

- RobG

---

谢谢您的回答。您能为我详细解释一下吗？我大部分都理解了，但是var options = select && select.options;是什么意思呢？以我的经验不足来看，我认为应该是var options = select.options;。 - TecBrat

在 JavaScript 中，select 不是最好的变量名。 - VisioN

var options = select && select.options 确保在访问select的属性之前，先判断它是否未定义（undefined）。 - Qwerty

我认为带有&&的那一行并没有太多意义...如果select未定义，getElementById将返回null。在这种情况下，options将为null，并且一旦您尝试访问长度属性就会出现错误。但也许我漏掉了什么？ - Xen_mar

Answer 2

使用 jQuery，通常的方法：

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

根据文档：

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

- Felix Kling

---

这很完美。还有一种方法可以检索标签或文本，而不是值本身吗？ - Cos

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

- KyleFarris

---

另外，如果你有这个元素: Array.from(element.querySelectorAll("option:checked"),e=>e.value); - Someguynamedpie

只是提供信息，使用selectedOptions/options集合比使用querySelectorAll更快。 - Adam Leggett

谢谢@AdamLeggett。对于那些不知道的人，将会改变@Someguynamedpie上面的代码为：Array.from(element.selectedOptions).map(v=>v.value);。 - KyleFarris

可以这样做，但请看下面我的回答 - 它在IE上根本不起作用，并且在某些旧版本的Chrome和Firefox中表现奇怪。如果您不关心性能，则querySelectorAll或过滤element.options可以完成工作。此外，您可以使用[].map.call()而不是使用Array.from()，我不知道这对性能会产生什么影响，但肯定不会是负面的。 - Adam Leggett

这对我有用，在多选下拉列表上，但也适用于所有下拉列表$(".multiple_select > option:checked").each(function(){ console.log(this.value) }); - Joviano Dias

这段代码在IE11中可以正常工作：var values = Array.prototype.slice.call(select.querySelectorAll('option:checked')).map(function(option){return option.value}) - Collin Anderson

Answer 4

您可以使用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>

- Tang Chanrith

---

一个本地化、简单易用、不使用jQuery的答案。谢谢。 - Andrew Schwartz

这是一个非常棒的答案，超级简洁明了，甚至可以缩减为一行代码：let selectedOptions = Array.from(document.getElementById(selectElem).selectedOptions).map(({ value }) => value); - d0rf47

如果所选内容在选项标签中，则此方法有效，但如果表单发生更改，则无效。 - Rana Nadeem

到了2023年，这应该是被接受的答案。更加简洁和跨平台兼容。不需要jQuery或其他复杂的步骤。 - Andrew Toups

Answer 5

ES6

[...select.options].filter(option => option.selected).map(option => option.value)

其中 select 是指向 <select> 元素的引用。

具体分解如下：

• [...select.options] 取出选项列表，并对其解构，以便我们可以在其上使用 Array.prototype 方法（注：也可考虑使用 Array.from()）。
• filter(...) 将选项减少到只有已选择的选项。
• map(...) 将原始的 <option> 元素转换为它们各自的值。

- Rick Viscomi

---

不错的功能实现 :) - roadev

你可以只使用reduce()方法。 我的实现 - To_wave

如果您可以获取<select>的引用，为什么不跳过filter()步骤，直接使用querySelectorAll获取<select>的:checked子元素的引用呢？ - Evgeny

@Evgeny 有很多种方法可以解决它。你应该在一个新的答案中发布你的方法。 - Rick Viscomi

这段代码看起来比在 options.length 上使用丑陋的 for 循环要好得多。但是在现代 JS 中，[...select.options] 有效吗？这不会三次迭代整个集合吗？（即第一次从选项构建数组，第二次过滤，第三次映射），而你可以用丑陋的 for 循环一次完成它。 - Anentropic

@Anentropic 这是一个好问题，但我认为除非我们谈论数百或数千个选项，否则效率并不重要。 - Rick Viscomi

Answer 6

如果您希望走现代化的路线，可以这样做：

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

< p > ... 操作符将可迭代项 (HTMLOptionsCollection) 映射到数组。

如果你只关心值，可以添加一个 map() 调用：

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

- Tomáš Zato

Answer 7

看一看：

HTML：

<a id="aSelect" href="#">Select</a>
<br />
<asp:ListBox ID="lstSelect" runat="server"  SelectionMode="Multiple" Width="100px">
    <asp:ListItem Text="Raj" Value="1"></asp:ListItem>
    <asp:ListItem Text="Karan" Value="2"></asp:ListItem>
    <asp:ListItem Text="Riya" Value="3"></asp:ListItem>
    <asp:ListItem Text="Aman" Value="4"></asp:ListItem>
    <asp:ListItem Text="Tom" Value="5"></asp:ListItem>
</asp:ListBox>

JQUERY：

$("#aSelect").click(function(){
    var selectedValues = [];    
    $("#lstSelect :selected").each(function(){
        selectedValues.push($(this).val()); 
    });
    alert(selectedValues);
    return false;
});

点击这里查看演示

- Sukhjeevan

---

不是粉丝——“HTML”不是真正的HTML（易读但不是HTML），答案需要添加JQuery作为依赖。 - Iiridayn

Answer 8

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

- Hassan

---

现代浏览器中纯JavaScript的最佳答案。+1 - alihardan

Answer 9

假设 multiSelect 是多选元素，只需使用其 selectedOptions 属性：

//show all selected options in the console:

for ( var i = 0; i < multiSelect.selectedOptions.length; i++) {
  console.log( multiSelect.selectedOptions[i].value);
}

- KAFFEECKO

---

不要仅仅发布代码，要详细说明代码的工作方式。 - Phiter

请不要仅提供JS代码片段，没有HTML是毫无意义的，只会产生错误。 - Shadow The Spring Wizard

@ShadowWizard 已收到 - KAFFEECKO

请注意，在IE浏览器中不支持selectedOptions。https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLSelectElement#Browser_compatibility - 2540625

Answer 10

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

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

​

- John Conde