如何通过JavaScript获取多选Select元素的选中值？

当<select>带有multiple属性时，直接使用element.value只会返回第一个选中项的值，这是原生JS的默认行为。要获取所有选中的选项值，可以通过以下两种方式实现：

方法1：利用selectedOptions属性 #

HTMLSelectElement提供了selectedOptions属性，直接返回所有选中的<option>元素集合，我们可以将其转换为数组后提取value：

var fruits = document.getElementById('fruits')

fruits.addEventListener('change', function() {
  // 将选中的选项集合转为数组，再提取value
  var selectedValues = Array.from(this.selectedOptions).map(option => option.value)
  console.log(selectedValues)
})

方法2：遍历所有选项筛选选中项 #

如果需要兼容更旧的浏览器（不支持selectedOptions），可以手动遍历所有<option>元素，筛选出selected属性为true的项：

var fruits = document.getElementById('fruits')

fruits.addEventListener('change', function() {
  var selectedValues = []
  // 遍历所有option
  for (var i = 0; i < this.options.length; i++) {
    if (this.options[i].selected) {
      selectedValues.push(this.options[i].value)
    }
  }
  console.log(selectedValues)
})

测试你的HTML结构，两种方法都能在多选时返回包含所有选中值的数组，和jQuery的返回结果一致。

内容的提问来源于stack exchange，提问作者Toniq