多选下拉框仅重复推送首个选中项的JavaScript问题排查

云原生阿岚

2026-5-14

解决多选下拉框获取所有选中项data-type的问题

嘿，我来帮你搞定这个问题～你的代码里有两个关键问题导致了当前的异常：

只能获取首个选中项：当你用$('#box').find("option:selected").data("type")时，jQuery的.data()方法在匹配多个元素的情况下，只会返回第一个元素对应的属性值，所以不管选多少项，你拿到的始终是第一个选中项的data-type。
数组重复累加旧值：你在全局定义了options数组，每次触发change事件都往里面push值，但从来没有清空或重置数组，导致旧的选中值一直留在数组里，甚至重复添加。

修正后的代码方案

这里有两种简洁的写法，都能实现你想要的效果：

方法一：用`.each()`遍历选中项

$('#box').change(function() {
  // 每次触发change时重新初始化数组，避免旧值残留
  const options = [];
  // 遍历所有选中的option，逐个收集data-type
  $(this).find("option:selected").each(function() {
    options.push($(this).data("type"));
  });
  console.log(options);
});

方法二：用`.map()`批量转换（更简洁）

$('#box').change(function() {
  // 用map把选中项的data-type转换成数组，最后用.get()转成普通JS数组
  const options = $(this).find("option:selected")
    .map(function() {
      return $(this).data("type");
    })
    .get();
  console.log(options);
});