Chrome动态操作select元素提交表单时值丢失异常问题

API 探路者

2026-8-29

问题根因

这是Chrome（Blink内核）存在已久的表单序列化逻辑bug，并非代码写法不规范导致，触发特征和你观测到的现象完全吻合：对不带multiple属性的单选<select>元素动态增删<option>节点后，浏览器内部维护的表单提交值缓存不会和DOM的selected状态同步。Firefox、Safari（WebKit内核）的表单值采集逻辑是提交时实时遍历DOM节点，因此不会出现同类异常。
你当前代码里用于存储已选值的select未添加multiple属性，本身是单选控件的语义，但你靠JS提交前全选option的方式实现多值提交，刚好命中Chrome的bug逻辑：

初始加载的option列表会被缓存为初始提交值
新增option操作会触发缓存更新，因此新增值的场景提交正常
一旦执行option移除操作，缓存就会进入异常状态：要么直接清空该字段的所有提交值，要么仅识别最后一次新增的option的选中状态

修复方案

两种方案均可100%规避该问题，优先选择第一种，符合原生表单语义：

给存储已选值的select添加multiple属性，匹配其提交多值的设计用途
修改后的标签写法：
```
<select name="members[]" multiple></select>
```
加完属性后无需改动现有option移动、提交前全选的逻辑，Chrome会按照多选select的规则实时采集提交值，不会触发单选select的缓存bug。
如果因为样式定制需求不能加multiple属性（比如要保持单选控件外观做自定义picklist），不要等到submit事件触发时才统一选中所有option，改为每次完成option移动操作（新增/移除）后，立刻将目标select内的所有option设置为selected=true，避开Chrome提交时读取脏缓存的时机。
对应逻辑示例：
```
// 把option移入members[]选择框后立刻执行
$('select[name="members[]"] option').prop('selected', true);
// 把option从members[]选择框移出后也立刻执行一次
$('select[name="members[]"] option').prop('selected', true);
```