本文介绍如何利用原生 javaScript 监听 元素的选项变化，并根据选中值动态显示或隐藏指定表单控件（如 input、div 等），无需依赖框架，兼容性好、代码简洁易维护。
本文介绍如何利用原生 javascript 监听 `
在 Web 表单开发中，常需实现“条件显示”逻辑：例如用户选择某个合同类型后，仅显示与其相关的字段，其余字段则自动隐藏。这种交互可通过监听
基础实现步骤
-
获取 select 元素并监听变化
使用 addEventListener(‘change’, …) 绑定事件，避免内联 onchange 属性，提升可维护性。 -
读取当前选中值
通过 element.value 获取选中 -
按需控制目标元素显隐
通过设置 style.display = ‘none’（隐藏）或 style.display = ”（恢复默认显示）来切换可见性。注意：使用 display 而非 visibility: hidden，因后者仍占据布局空间。
以下为完整示例代码：
<!-- HTML 结构 --> <select class="form-control" name="inputContracts" id="inputContracts" required> <option value="">@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="仅当选择 value1 时显示"> <input type="text" id="inputCont2" placeholder="仅当选择 value2 时显示">// javascript 控制逻辑 const selectEl = document.getElementById('inputContracts'); const inputCont1 = document.getElementById('inputCont1'); const inputCont2 = document.getElementById('inputCont2'); selectEl.addEventListener('change', function() { const selectedValue = this.value; // 隐藏所有关联字段 inputCont1.style.display = 'none'; inputCont2.style.display = 'none'; // 按值条件显示对应字段 if (selectedValue === '1') { inputCont1.style.display = 'block'; } else if (selectedValue === '2') { inputCont2.style.display = 'block'; } // 若值为空（未选择），保持全部隐藏 });注意事项与最佳实践
- ✅ 初始化状态处理：页面加载时，建议主动调用一次处理函数，确保初始状态与默认选项一致（例如：selectEl.dispatchEvent(new Event(‘change’))）。
- ✅ 使用 === 严格比较：避免类型转换导致的意外行为（如 ‘1’ == 1 为 true，但 ‘1’ === 1 为 false）。
- ✅ 支持多字段/复杂结构：可将目标元素封装为 map 或数组，通过 value 映射到元素列表，便于扩展。
- ⚠️ 样式兼容性提示：若目标元素本身设置了 display: flex 或 display: grid，请统一使用 display: ‘flex’ / display: ‘grid’ 恢复，而非空字符串（”），以保留原有布局模式。
- ⚠️ 无障碍考虑：隐藏元素时，建议同步添加 aria-hidden=”true” 并禁用 tabindex，提升屏幕阅读器体验；显示时需恢复相应属性。
通过上述方法，你可以在不引入额外库的前提下，高效、可靠地实现表单的动态条件渲染，显著提升用户体验与表单专业度。