Select标签的Option能否设置多个value值？如何用Node.js读取这些值？

核心结论 #

原生HTML规范中，标签不支持同时设置多个value属性。按照HTML的属性解析规则，同一个元素重复声明同名属性时，仅第一个声明的属性会生效，后续同名属性会被浏览器直接忽略。
你给出的示例代码中，每个声明的第二个value属性完全不会被识别，比如第一个选项实际生效的value只有"1"，value="2010"无任何作用。 #

实现option关联多值的替代方案 #

如果需要给单个option绑定多个值，常用两种实现方式：

方案1：value值拼接 #

将多个值用固定分隔符（逗号、竖线等）拼接为单个字符串存入value属性，示例代码：

<select name="Testing">
  <option value="1,2010">One</option>
  <option value="2,2122">Two</option>
  <option value="3,0">Three</option>
</select>

Node.js侧获取方式

前端直接默认表单提交即可，后端以Express框架为例：

// 需提前配置表单解析中间件
app.use(express.urlencoded({ extended: true }));

app.post('/form-submit', (req, res) => {
  // 拿到拼接后的value字符串
  const combinedVal = req.body.Testing;
  // 拆分得到多个值
  const [firstVal, secondVal] = combinedVal.split(',');
  // 后续业务处理
})

方案2：自定义data属性 #

通过HTML自定义data属性存储多个值，示例代码：

<select name="Testing">
  <option data-id="1" data-year="2010">One</option>
  <option data-id="2" data-year="2122">Two</option>
  <option data-id="3" data-year="0">Three</option>
</select>

Node.js侧获取方式

自定义data属性不会随默认表单提交，需要前端用JS主动收集后传给后端：

1. 前端JS采集数据示例：

const selectEl = document.querySelector('select[name="Testing"]');
// 表单提交时或者select变化时采集数据
const selectedOpt = selectEl.options[selectEl.selectedIndex];
const submitData = {
  id: selectedOpt.dataset.id,
  year: selectedOpt.dataset.year
};
// 用fetch/axios等工具将submitData以JSON格式传给后端

2. 后端Express接收示例：

// 需提前配置JSON解析中间件
app.use(express.json());

app.post('/form-submit', (req, res) => {
  const { id, year } = req.body;
  // 直接拿到两个关联值
  // 后续业务处理
})

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