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