多下拉选择表单中display:none隐藏的select元素仍被提交取值问题

问题原因 #

display: none仅控制元素的视觉可见性，不会改变元素的表单提交逻辑：只要表单控件拥有合法的name属性、未设置disabled禁用状态，无论是否可见，都会将当前选中值随表单一起提交。
而<select>组件即使没有显式给option加selected属性，默认也会自动选中第一个option作为默认值，所以你隐藏的exit下拉框一直有默认取值，自然会随表单一起提交。

解决方案 #

最常用的处理方式是隐藏下拉框的同时给它加disabled属性，被标记为disabled的表单控件不会被提交，对应逻辑示例如下：

// 显示exit下拉时
const exitSelect = document.getElementById('exit')
exitSelect.style.display = 'block'
exitSelect.disabled = false

// 隐藏exit下拉时
exitSelect.style.display = 'none'
exitSelect.disabled = true

你也可以根据自己的技术栈（比如Vue/React等框架）修改对应逻辑，只要保证隐藏的下拉框处于禁用状态即可。

其他可选方案：

• 动态切换下拉框的name属性：隐藏时清空name值，显示时再赋值为对应的字段名
• 表单提交前手动过滤所有display: none的表单控件的取值，不把这些值传入提交参数

内容的提问来源于stack exchange，提问作者s.khan