当 HTML 表单中使用 时，浏览器默认以多个同名参数（如 key=val1&key=val2）提交数据，但后端数据库存储过程通常只接收首个值。本文介绍一种纯前端兼容方案：通过 JavaScript 在提交前将多选值拼接为逗号分隔的单一键值对（如 key=val1,val2,val3），无需依赖外部库或启用复杂配置。
当 html 表单中使用 `
在标准 HTML 表单提交机制下，<select name="key" multiple></select> 的行为是符合规范的：浏览器会为每个选中项生成独立的 key=value 参数。然而，传统数据库存储过程（如 Oracle PL/SQL 中 func(key VARCHAR2)）仅声明单个字符串形参，无法原生解析重复键——它只会捕获第一个 key 的值（如 val1），其余被忽略。
根本解法：提交前统一归并多选值
由于目标环境禁用 JavaScript 执行（JS 被阻断），需明确：该方案要求客户端允许运行基础脚本；若完全禁 JS，则必须由服务端或代理层（如 Nginx、API 网关）进行参数重组，HTML 层无纯静态解法。假设可启用轻量 JS（现代浏览器默认支持，且不依赖框架），推荐以下稳健实现：
<form id="form" method="post">
<input type="text" name="text" placeholder="其他字段" required>
<select name="key" multiple required>
<option value="val1">选项一</option>
<option value="val2">选项二</option>
<option value="val3">选项三</option>
</select>
<button type="submit">提交</button>
</form>
<script>
document.getElementById('form').addEventListener('submit', function(e) {
e.preventDefault();
const formData = new FormData(this);
const selectedValues = formData.getAll('key'); // 获取所有选中值数组
formData.delete('key'); // 移除原始多键
// 构建新键值对：key=值1,值2,值3
const mergedKey = selectedValues.join(',');
formData.set('key', mergedKey);
// 发起标准表单提交（保持 content-type: application/x-www-form-urlencoded）
fetch(this.action || window.location.href, {
method: this.method || 'POST',
body: new URLSearchParams(formData)
})
.then(response => response.text())
.then(data => console.log('提交成功:', data))
.catch(err => console.error('提交失败:', err));
});
</script>✅ 关键优势：
- 输出格式严格为
key=val1,val2,val3，与存储过程VARCHAR2参数完全兼容； - 复用原生
FormData和URLSearchParams，无第三方依赖，兼容 IE10+ 及所有现代浏览器； - 保留表单其他字段（如
text=test）自动序列化，无需手动拼接； -
fetch()提交可替换为this.submit()（若需跳转页面），但需注意FormData需转换为URLSearchParams后传入。
⚠️ 注意事项：
- 若选项值本身含逗号（
,）、等号（=）或空格，需提前编码：encodeURIComponent(val)，拼接后服务端对应解码； - 数据库侧建议在存储过程中添加校验逻辑，例如
INSTR(key, ',') > 0判断是否为多值，再用APEX_STRING.SPLIT（Oracle APEX）或自定义函数分割； - 完全禁用 JS 的场景下，唯一替代方案是改用单选按钮组（
<input type="checkbox" name="key">）配合服务端聚合，或在反向代理层重写请求参数（如 Nginx 的map指令 +rewrite）。
此方案平衡了前端可控性与后端兼容性，让数据库开发者无需修改存储过程签名，即可安全接收全部用户选择。
立即学习“前端免费学习笔记（深入）”；
