本文介绍如何通过 jquery 监听输入框事件，实时比对用户输入内容与下拉菜单选项文本，并自动禁用匹配项，实现输入即禁用的交互效果。
在表单开发中，常需避免用户在输入框和下拉框中重复选择相同值（例如“New”既手动输入又从下拉中选中），此时可借助 jQuery 实现动态禁用逻辑：当用户在输入框中键入某文本（如 NEW），下拉框中对应文本的 <option> 将被自动禁用，防止重复提交或逻辑冲突。
✅ 实现原理
核心思路是监听输入框的 keyup（实时响应键盘输入）和 change（兼容粘贴、失焦等场景）事件，获取当前输入值，再遍历下拉框所有 <option> 元素，将其文本内容（.text()）与输入值进行严格字符串比对，并据此设置 disabled 属性。
? 完整示例代码
<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">Archived</option> </select>
$('.typeVal').on('keyup change', function() {
const inputText = $(this).val().trim(); // 去除首尾空格，提升健壮性
$('#select2 option').prop('disabled', function() {
return $(this).text().trim() === inputText;
});
});⚠️ 注意事项
-
大小写敏感：上述代码默认区分大小写（"New" ≠ "new"）。如需忽略大小写，可改为：
return $(this).text().trim().toLowerCase() === inputText.toLowerCase();
- 空值处理：trim() 可避免因空格导致误判；若输入为空，所有选项将恢复启用（因比对结果全为 false）。
- 性能考虑：对于超大选项列表（如数百项），建议添加防抖（debounce）逻辑，避免高频触发。
- 无障碍支持：禁用选项后，屏幕阅读器会跳过该 <option>，符合 WCAG 标准；但请确保业务逻辑允许此行为（如非必填场景）。
✅ 效果验证
- 输入 New → <option value="1">New</option> 被禁用（置灰且不可选）；
- 输入 OLD → 第二项被禁用；
- 清空输入框 → 所有选项自动恢复可用。
该方案轻量、可复用，适用于多组输入+下拉联动场景，只需统一类名（.typeVal）与下拉 ID（#select2）即可快速集成。
