如何正确获取多个下拉选择框的值并存入对象数组_网络技术

如何正确获取多个下拉选择框的值并存入对象数组

发布时间 - 2026-01-29 00:00:00 点击率：次

本文讲解如何准确读取多个 `

在表单处理中，若需收集多个独立

原逻辑中，selectedVal 是单一变量，被所有 select 的 change 事件共用。当用户先后切换不同下拉框时，该变量只会保留最后一次触发的值（例如先选 Red，再选 V，selectedVal 最终只存 "V"），导致 favColor 和 location 字段被错误地赋为同一值。

✅ 正确做法是：在提交时刻（addDets 函数内），直接按 ID 获取各 。这样能确保每个字段读取的是用户最终选定的真实值，且互不干扰。

以下是优化后的完整实现：

let list = [];

const addDets = (ev) => {
  ev.preventDefault();

  // ✅ 直接、独立获取每个 select 的当前值
  const favColor = document.getElementById("fav").value;
  const location = document.getElementById("loc").value;

  const officials = {
    name: document.getElementById("name").value,
    age: document.getElementById("age").value,
    favColor,      // 对应 
  };

  list.push(officials);
  document.forms[0].reset(); // 重置表单（注意：会清空 select 的选中状态）
  console.log(list);
};

document.addEventListener("DOMContentLoaded", () => {
  document.getElementById('btn').addEventListener('click', addDets);
});

? 关键注意事项：

document.getElementById("fav").value 返回的是
若需支持多选（
document.forms[0].reset() 会将所有表单控件（包括
无需为每个

通过这种「按需读取、即时封装」的方式，既能保证数据准确性，又能避免状态污染，是构建健壮表单数据收集逻辑的最佳实践。

# red # Array # 封装 # select # 全局变量 # Event # 对象 # 事件 # location # 表单 # 多个 # 的是 # 而非 # 这是 # 若需 # 下拉框 # 遍历 # 你有 # 只会

相关栏目：【网站优化151355 】【网络推广146373 】【网络技术251813 】【 AI营销90571 】

上一篇：抖音网页版入口无需登录_抖音网页版直接打开观看

下一篇：windows更新清理怎么操作？更新缓存及旧版本文件清理释放

相关栏目网站优化
网络推广
网络技术
AI营销

最新文章 Sublime怎么一键压缩JS代码 Su sublime如何在搜索中使用正则表达式 Sublime如何设置透明窗口效果 Su mysql如何设计商品表结构_mysql css属性背景图不显示怎么办_通过检查路如何使用Golang实现排序_Golan 农历闰月是怎么回事_为合回归年加一月调整塑造《刺客信条》艾吉奥传奇的编剧离开育碧 1英里等于多少公里 1mile和km的换 css grid布局中行和列是如何定义的 PS批量旋转和翻转图片，快速校正图片方向 C# Swagger UI自定义方法 C OPPO手机九宫格和全键盘怎么切换_OP Go语言如何实现用户登录注册_Golan 1节飞行速度多少公里每小时 1节是多少公纸嫁衣8千子树第五章庙门怎么开启庙门 Laravel 多行数据编辑表单中实现逐明日之后如何提升钓鱼等级明日之后提升钓支付宝怎样查年度账单_支付宝年度账单查看 C# 多线程UI更新Dispatcher

上一篇：抖音网页版入口无需登录_抖音网页版直接打开观看

下一篇：windows更新清理怎么操作？更新缓存及旧版本文件清理释放