当 HTML 表单中使用 时，浏览器默认以多个同名参数（如 key=val1&key=val2）提交数据，但后端数据库存储过程通常只接收首个值。本文介绍一种纯前端兼容方案：通过 JavaScript 在提交前将多选值拼接为逗号分隔的单一键值对（如 key=val1,val2,val3），无需依赖外部库或启用复杂配置。

当 html 表单中使用 `` 时，浏览器默认以多个同名参数（如 `key=val1&key=val2`）提交数据，但后端数据库存储过程通常只接收首个值。本文介绍一种纯前端兼容方案：通过 javascript 在提交前将多选值拼接为逗号分隔的单一键值对（如 `key=val1,val2,val3`），无需依赖外部库或启用复杂配置。

在标准 HTML 表单提交机制下， 的行为是符合规范的：浏览器会为每个选中项生成独立的 key=value 参数。然而，传统数据库存储过程（如 Oracle PL/SQL 中 func(key VARCHAR2)）仅声明单个字符串形参，无法原生解析重复键——它只会捕获第一个 key 的值（如 val1），其余被忽略。

根本解法：提交前统一归并多选值
由于目标环境禁用 JavaScript 执行（JS 被阻断），需明确：该方案要求客户端允许运行基础脚本；若完全禁 JS，则必须由服务端或代理层（如 Nginx、API 网关）进行参数重组，HTML 层无纯静态解法。假设可启用轻量 JS（现代浏览器默认支持，且不依赖框架），推荐以下稳健实现：

选项一 选项二 选项三提交

<script> document.getElementById('form').addEventListener('submit', function(e) { e.preventDefault(); const formData = new FormData(this); const selectedValues = formData.getAll('key'); // &#33719;&#21462;&#25152;&#26377;&#36873;&#20013;&#20540;&#25968;&#32452; formData.delete('key'); // &#31227;&#38500;&#21407;&#22987;&#22810;&#38190; // &#26500;&#24314;&#26032;&#38190;&#20540;&#23545;&#65306;key=&#20540;1,&#20540;2,&#20540;3 const mergedKey = selectedValues.join(','); formData.set('key', mergedKey); // &#21457;&#36215;&#26631;&#20934;&#34920;&#21333;&#25552;&#20132;&#65288;&#20445;&#25345; content-type: application/x-www-form-urlencoded&#65289; fetch(this.action || window.location.href, { method: this.method || 'POST', body: new URLSearchParams(formData) }) .then(response => response.text()) .then(data => console.log('&#25552;&#20132;&#25104;&#21151;:', data)) .catch(err => console.error('&#25552;&#20132;&#22833;&#36133;:', err)); }); </script>

✅ 关键优势：

• 输出格式严格为 key=val1,val2,val3，与存储过程 VARCHAR2 参数完全兼容；
• 复用原生 FormData 和 URLSearchParams，无第三方依赖，兼容 IE10+ 及所有现代浏览器；
• 保留表单其他字段（如 text=test）自动序列化，无需手动拼接；
• fetch() 提交可替换为 this.submit()（若需跳转页面），但需注意 FormData 需转换为 URLSearchParams 后传入。

⚠️ 注意事项：

使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审

使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

下载

• 若选项值本身含逗号（,）、等号（=）或空格，需提前编码：encodeURIComponent(val)，拼接后服务端对应解码；
• 数据库侧建议在存储过程中添加校验逻辑，例如 INSTR(key, ',') > 0 判断是否为多值，再用 APEX_STRING.SPLIT（Oracle APEX）或自定义函数分割；
• 完全禁用 JS 的场景下，唯一替代方案是改用单选按钮组（）配合服务端聚合，或在反向代理层重写请求参数（如 Nginx 的 map 指令 + rewrite）。

此方案平衡了前端可控性与后端兼容性，让数据库开发者无需修改存储过程签名，即可安全接收全部用户选择。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！