17370845950

本文介绍如何通过 jquery 监听输入框事件，实时比对用户输入内容与下拉菜单选项文本，并自动禁用匹配项，实现输入即禁用的交互效果。

在表单开发中，常需避免用户在输入框和下拉框中重复选择相同值（例如“New”既手动输入

又从下拉中选中），此时可借助 jQuery 实现动态禁用逻辑：当用户在输入框中键入某文本（如 NEW），下拉框中对应文本的 将被自动禁用，防止重复提交或逻辑冲突。

✅ 实现原理

核心思路是监听输入框的 keyup（实时响应键盘输入）和 change（兼容粘贴、失焦等场景）事件，获取当前输入值，再遍历下拉框所有 元素，将其文本内容（.text()）与输入值进行严格字符串比对，并据此设置 disabled 属性。

? 完整示例代码

  New
  OLD
  Pending
  Archived

$('.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）逻辑，避免高频触发。
• 无障碍支持：禁用选项后，屏幕阅读器会跳过该 ，符合 WCAG 标准；但请确保业务逻辑允许此行为（如非必填场景）。

✅ 效果验证

• 输入 New → New 被禁用（置灰且不可选）；
• 输入 OLD → 第二项被禁用；
• 清空输入框 → 所有选项自动恢复可用。

该方案轻量、可复用，适用于多组输入+下拉联动场景，只需统一类名（.typeVal）与下拉 ID（#select2）即可快速集成。