本文介绍如何使用 jquery 实现：当用户在输入框中输入文本时，自动禁用下拉菜单（`
在表单交互设计中，常需防止用户在输入框和下拉菜单中重复提交相同值（例如“New”既手动输入又从下拉中选中）。jQuery 提供了简洁高效的解决方案：监听输入框的 keyup 和 change 事件，实时比对并动态禁用匹配的下拉选项。
✅ 核心实现逻辑
- 绑定 .typeVal 输入框的 keyup（按键松开）与 change（值变更）事件；
- 获取当前输入值（$(this).val()）；
- 遍历 #select2 option，通过 .prop("disabled", callback) 设置禁用状态；
- 回调函数中使用 $(this).text() == $val 进行精确文本匹配（注意：区分大小写，且忽略前后空格）。
? 完整可运行示例
$('.typeVal').on('keyup change', function() {
const inputText = $.trim($(this).val()); // 去除首尾空格，提升鲁棒性
$('#select2 option').prop('disabled', function() {
return $.trim($(this).text()) === inputText;
});
});⚠️ 注意事项与优化建议
- 大小写敏感："new" ≠ "New"。如需忽略大小写，可改为 $(this).text().toLowerCase() === inputText.toLowerCase()；
- 空值处理：输入为空时，所有选项应恢复启用——上述代码已天然支持（空字符串不匹配任何非空选项）；
- 性能考虑：对于超大下拉列表（>100 项），可添加防抖（debounce）避免高频触发；
- 无障碍兼容：禁用选项仍可被屏幕阅读器读出，若需彻底移除语义干扰，建议改用 remove() 或 hide() + data-* 标记，但需同步管理状态；
- 多输入框场景：若页面存在多个 .typeVal，且共用同一下拉，需确保逻辑能正确响应任一输入源。
该方案轻量、兼容性强（支持 jQuery 1.7+），适用于表单校验、动态筛选、防重复录入等多种业务场景。
