本文介绍如何在用户从下拉菜单中选择特定选项（如值 2、5 或 7）时，动态显示关联的文本输入框（#custom_25），并推荐使用 disabled 属性替代显隐控制，以确保表单提交时数据逻辑清晰、语义正确。
本文介绍如何在用户从下拉菜单中选择特定选项（如值 2、5 或 7）时，动态显示关联的文本输入框（`#custom_25`），并推荐使用 `disabled` 属性替代显隐控制，以确保表单提交时数据逻辑清晰、语义正确。
在 Web 表单开发中，常需实现“条件显示”交互：仅当用户选择某些特定选项时，才呈现补充输入项。本例中，下拉框 #custom_24 的选项值为数字字符串（"2"、"5"、"7"），对应“Specialist”、“Technician”、“Others”等需进一步说明的场景；此时应显示 #custom_25 文本框供用户填写详情。
⚠️ 注意：直接使用 .show() / .hide() 控制可见性存在隐患——即使元素被隐藏，其 value 仍会随表单一同提交（除非额外清空或禁用）。更健壮的做法是禁用（disabled）该字段：禁用后字段不会参与表单提交，且可通过 CSS 精确控制视觉表现。
✅ 推荐实现方案（原生 JavaScript + CSS）
// 监听下拉框 change 事件（注意：绑定到 select 元素本身，而非 Select2 容器）
document.getElementById('custom_24').addEventListener('change', function(e) {
const selectedValue = e.target.value;
const targetInput = e.target.form.custom_25;
// 判断是否为触发显示的值（2、5、7）
const shouldEnable = ['2', '5', '7'].includes(selectedValue);
// 启用/禁用输入框
targetInput.disabled = !shouldEnable;
});
配套 CSS（让禁用状态的输入框完全不可见）：
input[name="custom_25"]:disabled {
display: none;
}
/* 可选：若需保留占位空间，改用 visibility: hidden */
/* input[name="custom_25"]:disabled { visibility: hidden; } */
? HTML 结构关键点
- 确保
- 初始即设置 disabled 属性，避免页面加载时意外暴露；
- 整个结构需包裹在
? 注意事项与最佳实践
- ❌ 避免监听 Select2 自定义容器（如 #s2id_custom_24 或 .select2-container）的点击事件——它不触发原生 change，且易因插件内部渲染逻辑失效；
- ✅ 始终监听原生
- ✅ 使用 ['2','5','7'].includes(value) 替代 == 比较，避免类型转换歧义（'2' == 2 为 true，但语义上字符串值更准确）；
- ✅ 若需支持多语言或动态配置，可将触发值数组抽离为配置常量；
- ✅ 表单提交前建议增加校验：当 #custom_24 为 2/5/7 且 #custom_25 为空时，提示用户补全。
此方案轻量、兼容性好（无需 jQuery）、语义清晰，并从根本上规避了隐藏字段误提交的风险。
