本文介绍使用 jquery 实现“当用户在输入框中输入文本时，自动禁用下拉菜单中相同文本的选项”，支持实时响应（keyup + change），兼顾大小写敏感性与空值处理。
在表单交互开发中，常需避免用户在输入框和下拉框中重复选择同一值（例如：手动输入“New”后，下拉中“New”选项应不可选）。jQuery 提供简洁高效的 DOM 操作能力，可轻松实现该逻辑。
✅ 基础实现方案
以下代码监听 .typeVal 输入框的 keyup 和 change 事件，获取当前输入值，并遍历 #select2 下所有
$('.typeVal').on('keyup change', function() {
const inputVal = $(this).val().trim(); // 去除首尾空格，提升健壮性
$('#select2 option').prop('disabled', function() {
return $(this).text().trim() === inputVal;
});
});? 注意：使用 === 进行严格相等判断，避免类型隐式转换导致误判；.trim() 防止空格干扰匹配。
? 完整可运行示例
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type="text" class="typeVal" placeholder="输入值（如：New）" /> <select class="form-control" id="select2"> <option value="1">New</option> <option value="2">OLD</option> <option value="3">Pending</option> <option value="4">Draft</option> </select>
✅ 效果演示：
- 输入 New → 立即禁用（灰显且不可选）；
- 清空输入框 → 所有选项恢复可用；
- 输入 new（小写）→ 不匹配 New（默认区分大小写），如需忽略大小写，可改为：
return $(this).text().trim().toLowerCase() === inputVal.toLowerCase();
⚠️ 注意事项与最佳实践
- 性能考虑：若下拉选项极多（如数百项），建议添加防抖（debounce）避免高频重绘，但普通场景无需过度优化；
-
初始状态同步：页面加载后若输入框已有默认值，需手动触发一次更新：
$('.typeVal').trigger('change'); - 无障碍兼容：禁用选项仍保留在 DOM 中，屏幕阅读器可感知 disabled 属性，符合 WCAG 标准；
- 服务端校验不可省略：前端禁用仅为体验优化，后端必须独立验证提交数据，防止绕过。
通过这一简洁而鲁棒的 jQuery 逻辑，你能在不修改 HTML 结构的前提下，快速实现输入与下拉联动的约束控制，显著提升表单的友好性与数据一致性。
