如何在不使用multiple属性时将select选中项累积存入同一数组

原代码的问题在于每次触发change事件调用chooseOption时，都会重新创建空数组selected，导致之前的选中项被清空。要实现追加到同一个数组，只需把数组变量移到函数外部，同时处理重复选中的情况即可，完整代码如下：

完整代码 #

HTML部分 #

<select id="drugname" name="drugname" required>
  <option value="" selected></option>
  <option value="drug1">drug1</option>
  <option value="drug2">drug2</option>
  <option value="drug3">drug3</option>
</select>

JavaScript部分 #

// 全局存储选中项的数组，避免每次调用函数被重置
let selected = [];

function chooseOption() {
  const selectElement = document.getElementById('drugname');
  const selectedValue = selectElement.value;
  
  // 排除空值，且避免重复添加相同选项
  if (selectedValue !== '' && !selected.includes(selectedValue)) {
    selected.push(selectedValue);
    // 可选：打印数组查看结果
    console.log('当前选中项数组:', selected);
  }
}

const selectit = document.querySelector('#drugname');
selectit.addEventListener('change', chooseOption);

关键说明 #

• 将selected数组定义在函数外部，作为全局变量，这样每次触发选择事件时，都会基于已有数组追加新选中项，而不是重新创建空数组
• 添加了!selected.includes(selectedValue)判断，防止用户重复选择同一选项时重复存入数组
• 简化了原代码的逻辑，直接获取当前选中的value即可（无multiple属性时，select每次只能选中一个option）

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