通过 javascript 监听下拉菜单的 change 事件，动态显示与所选值匹配的唯一输入框，隐藏其余输入框，实现表单字段的条件渲染与校验逻辑分离。
通过 javascript 监听下拉菜单的 change 事件，动态显示与所选值匹配的唯一输入框，隐藏其余输入框，实现表单字段的条件渲染与校验逻辑分离。
在构建动态表单时，常需根据用户选择（如类型、模式或场景）仅展示对应的输入字段，既提升用户体验，也便于后续针对不同字段设置专属验证规则（如正则校验、必填逻辑等）。核心思路是：为每个选项绑定唯一输入框，利用 CSS 控制显隐，并通过 JavaScript 实现状态同步。
以下是一个完整、可直接运行的实现方案：
HTML 结构（含语义化增强）：
CSS 样式（轻量且可复用）：
.hidden {
display: none;
}
.dynamic-input {
margin-top: 8px;
padding: 6px 10px;
border: 1px solid #ccc;
border-radius: 4px;
}
JavaScript 逻辑（模块化、健壮性优化）：
document.addEventListener('DOMContentLoaded', () => {
const selectEl = document.getElementById('optionSelect');
const inputFields = {
'1': document.getElementById('FirstOption'),
'2': document.getElementById('SecondOption'),
'3': document.getElementById('ThirdOption'),
'4': document.getElementById('FourthOption')
};
selectEl.addEventListener('change', () => {
const selected = selectEl.value;
// 隐藏所有输入框
Object.values(inputFields).forEach(input => {
input.classList.add('hidden');
});
// 显示匹配项（仅当有有效值且对应元素存在）
if (selected && inputFields[selected]) {
inputFields[selected].classList.remove('hidden');
// 可选：自动聚焦以提升可用性
inputFields[selected].focus();
}
});
});
✅ 关键要点说明：
- 必须为
<select></select>添加id="optionSelect"，并为每个<option></option>设置value属性（原示例缺失，否则this.value恒为空字符串）； - 所有输入框初始添加
.hidden类，确保页面加载时不闪现无关字段； - 使用
DOMContentLoaded确保 DOM 就绪后再绑定事件，避免获取元素失败； - 支持空值（如默认提示项），防止未选择时误显输入框；
- 后续可轻松扩展：新增选项只需在
inputFields对象中追加键值对，并在 HTML 中添加对应<input>即可。
该方案简洁、无依赖、兼容性强，是实现“条件输入字段”的标准实践。
