如何在单页面多Select2组件中获取所有选中选项的数组？

架构老林

2026-5-8

获取多个Select2组件的所有选中选项

我懂你的困扰——直接用$("select").val()确实只会返回第一个匹配到的select元素的选中值，因为jQuery的.val()方法在处理多个元素时，默认只取第一个的结果。要把所有Select2组件的选中选项整合成一个数组，可以试试下面这几种方法：

方法一：遍历收集（直观易懂）

用.each()逐个遍历所有select元素，把每个组件的选中值收集起来，还能处理单选/多选的差异：

let allSelected = [];

$("select").each(function() {
  const currentVal = $(this).val();
  // 跳过没有选中选项的组件
  if (!currentVal) return;
  
  // 如果是多选的Select2，val()返回数组，直接合并；单选则是单个值，push进去
  if (Array.isArray(currentVal)) {
    allSelected = allSelected.concat(currentVal);
  } else {
    allSelected.push(currentVal);
  }
});

console.log(allSelected);

方法二：用map简化代码

jQuery的.map()可以更简洁地完成收集操作，再结合数组扁平化处理：

const allSelected = $("select")
  .map(function() {
    return $(this).val();
  })
  .get() // 把jQuery对象转成原生数组
  .flat() // 扁平化数组（处理多选返回的数组）
  .filter(val => val !== null); // 过滤掉未选中的空值

console.log(allSelected);