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

Question

看起来很奇怪我找不到已经问过的这个,但是在这里它!

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

这似乎应该是一个非常简单的任务,但我似乎无法做到这一点.

谢谢.

Answer 1

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

Answer 2

通常的方式:

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

来自文档:

在<select multiple="multiple">元素的情况下,该.val()方法返回包含每个所选选项的数组;

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

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>

Answer 5

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

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

​

Answer 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

Answer 7

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

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

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

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

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

Answer 8

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>

Answer 9

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

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提取值的函数。