本文介绍如何使用原生 javascript 实现下拉菜单选项变化时，动态显示唯一匹配的输入框，隐藏其余字段，便于为不同选项配置独立校验规则。
本文介绍如何使用原生 javascript 实现下拉菜单选项变化时，动态显示唯一匹配的输入框，隐藏其余字段，便于为不同选项配置独立校验规则。
在构建灵活表单时，常需根据用户选择动态呈现差异化的输入控件——例如选项“1”对应手机号格式输入，“2”对应邮箱、“3”为日期、“4”为自定义编号。这种场景无需依赖框架，纯 JavaScript 即可高效实现。
核心思路是：监听 <select></select> 的 change 事件 → 获取选中值 → 批量隐藏所有输入框 → 仅显示与该值匹配的输入框。为确保健壮性，我们为每个 <option></option> 显式设置 value 属性（避免依赖文本内容），并为所有输入框预设 hidden 类控制显隐。
以下是完整可运行代码：
<style>
.hidden { display: none; }
input { margin: 8px 0; padding: 6px; border: 1px solid #ccc; border-radius: 4px; }
</style>
<script>
const optionSelect = document.getElementById('optionSelect');
const inputFields = {
"1": document.getElementById('FirstOption'),
"2": document.getElementById('SecondOption'),
"3": document.getElementById('ThirdOption'),
"4": document.getElementById('FourthOption')
};
optionSelect.addEventListener('change', function() {
const selectedValue = this.value;
// 隐藏全部输入框
Object.values(inputFields).forEach(input => {
input.classList.add('hidden');
});
// 仅显示匹配项（含空值防护）
if (selectedValue && inputFields[selectedValue]) {
inputFields[selectedValue].classList.remove('hidden');
}
});
</script>✅ 关键实践要点：
-
务必为
<select></select>添加id（如id="optionSelect"），否则getElementById将失效； - 所有
<option></option>必须设置value属性（空value=""用于默认提示），不可仅依赖 innerText； - 输入框初始即带
class="hidden"，避免页面加载时短暂闪现冗余字段； - 使用
Object.values()统一操作所有输入框，扩展性强——新增选项时只需在inputFields对象中追加键值对即可； - 后续可轻松集成校验逻辑：例如当
selectedValue === "2"时，对SecondOption绑定邮箱正则验证/.+@.+\..+/。
此方案轻量、语义清晰、无外部依赖，适用于任何需要条件输入的表单场景。
