本文介绍如何使用原生 JavaScript 监听 元素的选项变化，并基于选中值动态控制其他表单元素（如输入框）的显示与隐藏，无需依赖外部库，兼容性好、实现简洁高效。
本文介绍如何使用原生 javascript 监听 `
在 Web 表单开发中，常需根据用户选择的下拉项（
✅ 基础实现步骤
- 为 ；
- 在事件回调中获取当前选中值（element.value）；
- 使用条件判断，通过 style.display = 'none' 或 'block' 控制目标元素显隐。
以下是一个完整可运行的示例：
<!-- HTML 结构 -->
<select class="form-control" name="inputContracts" id="inputContracts" required>
<option value="0">@lang('general.example.select')</option>
<option value="1">@lang('general.example.value1')</option>
<option value="2">@lang('general.example.value2')</option>
</select>
<!-- 待控制的输入框 -->
<input type="text" id="inputCont1" placeholder="仅在选择 value=1 时显示" />
<input type="text" id="inputCont2" placeholder="仅在选择 value=2 时显示" />// JavaScript 逻辑（建议置于 </body> 底部或 DOMContentLoaded 中）
document.getElementById('inputContracts').addEventListener('change', function() {
const selectedValue = this.value;
const cont1 = document.getElementById('inputCont1');
const cont2 = document.getElementById('inputCont2');
// 重置所有相关元素的显示状态（推荐做法）
cont1.style.display = 'none';
cont2.style.display = 'none';
// 按需显示对应元素
if (selectedValue === '1') {
cont1.style.display = 'block';
} else if (selectedValue === '2') {
cont2.style.display = 'block';
}
});⚠️ 注意事项与最佳实践
-
避免内联样式污染：生产环境建议通过添加/移除 CSS 类（如 .hidden { display: none; }）来控制显隐，便于维护和复用：
cont1.classList.toggle('hidden', selectedValue !== '1'); -
确保 DOM 已加载：若脚本置于
中，请包裹在 DOMContentLoaded 事件内，防止因元素未就绪导致 getElementById 返回 null。立即学习“前端免费学习笔记（深入）”；
-
处理初始状态：页面首次加载时，下拉框可能已有默认选中项（如 value="0"），此时应主动触发一次状态同步：
// 初始化后立即执行一次 handleSelectionChange();
兼容性提示：element.value 在所有现代浏览器及 IE9+ 中均可靠；若需支持更老版本，可改用 e.options[e.selectedIndex].value。
通过以上方式，你可以在不引入框架的前提下，构建响应灵敏、语义清晰的动态表单逻辑。关键在于将“状态驱动视图”的思想落实到轻量级 DOM 操作中——简洁，可控，且易于测试与扩展。
