17370845950

本文介绍使用 jquery 实现“当用户在输入框中输入文本时，自动禁用下拉菜单中相同文本的选项”，支持实时响应（keyup + change），兼顾大小写敏感性与空值处理。

在表单交互开发中，常需避免用户在输入框和下拉框中重复选择同一值（例如：手动输入“New”后，下拉中“New”选项应不可选）。jQuery 提供简洁高效的 DOM 操作能力，可轻松实现该逻辑。

✅ 基础实现方案

以下代码监听 .typeVal 输入框的 keyup 和 change 事件，获取当前输入值，并遍历 #select2 下所有 元素，将其文本内容（.text()）与输入值进行精确匹配；若一致，则设为禁用：

$('.typeVal').on('keyup change', function() {
  const inputVal = $(this).val().trim(); // 去除首尾空格，提升健壮性
  $('#select2 option').prop('disabled', function() {
    return $(this).text().trim() === inputVal;
  });
});

? 注意：使用 === 进行严格相等判断，避免类型隐式转换导致误判；.trim() 防止空格干扰匹配。

? 完整可运行示例

  New
  OLD
  Pending
  Draft

✅ 效果演示：

• 输入 New → New 立即禁用（灰显且不可选）；
• 清空输入框 → 所有选项恢复可用；
• 输入 new（小写）→ 不匹配 New（默认区分大小写），如需忽略大小写，可改为：

  return $(this).text().trim().toLowerCase() === inputVal.toLowerCase();

⚠️ 注意事项与最佳实践

• 性能考虑：若下拉选项极多（如数百项），建议添加防抖（debounce）避免高频重绘，但普通场景无需过度优化；
• 初始状态同步：页面加载后若输入框已有默认值，需手动触发一次更新：

  $('.typeVal').trigger('change');

• 无障碍兼容：禁用选项仍保留在 DOM 中，屏幕阅读器可感知 disabled 属性，符合 WCAG 标准；
• 服务端校验不可省略：前端禁用仅为体验优化，后端必须独立验证提交数据，防止绕过。

通过这一简洁而鲁棒的 jQuery 逻辑，你能在不修改 HTML 结构的前提下，快速实现输入与下拉联动的约束控制，显著提升表单的友好性与数据一致性。