动态禁用下拉菜单中与输入框内容相同的选项（jQuery 实现）

本文介绍如何使用 jquery 实时监听输入框变化，并自动禁用下拉菜单中文字内容与输入值完全匹配的 `` 项，实现输入即同步过滤可选值的效果。

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

核心思路是：监听输入框（.typeVal）的 keyup 和 change 事件 → 获取当前输入值 → 遍历下拉框（#select2）的所有 元素 → 将其文本内容（.text()）与输入值进行严格字符串比对 → 匹配则设为 disabled=”true”，否则启用。

以下是完整、可直接运行的实现代码：

       New   OLD   Archived   Draft 

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

✅ 关键细节说明：

• 使用 .prop(‘disabled’, fn) 而非 .attr()，因 disabled 是布尔属性，prop() 更准确反映当前状态；
• 添加 .trim() 防止因空格导致误判（如输入 “New ” 不应禁用 “New”）；
• 采用严格相等 ===，避免类型隐式转换带来的意外行为；
• 同时绑定 keyup（实时响应打字）和 change（覆盖粘贴、失焦等场景），确保全覆盖。

⚠️ 注意事项：

• 该逻辑区分大小写（如输入 “new” 不会禁用 “New”），如需忽略大小写，可改为：

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

• 若下拉选项含 html 标签或富文本，.text() 仍安全提取纯文本；若需匹配 value 属性而非显示文本，请将 .text() 替换为 .val()；
• 页面加载后首次输入前，所有选项默认可用；清空输入框时，所有选项将自动恢复启用（因空字符串不匹配任何非空选项）。

此方案轻量、兼容性强（支持 jQuery 1.7+），无需额外插件，适用于各类表单联动场景，是提升用户体验的实用技巧。