本文介绍如何使用 jquery 实时监听输入框变化，并自动禁用下拉菜单中文字内容与输入值完全匹配的 `
在表单交互开发中，常需避免用户在输入框和下拉框中重复选择相同语义的值（例如输入“New”后，下拉中的“New”选项应不可选）。jQuery 提供了简洁高效的 DOM 操作能力，可轻松实现该逻辑。
核心思路是：监听输入框（.typeVal）的 keyup 和 change 事件 → 获取当前输入值 → 遍历下拉框（#select2）的所有
以下是完整、可直接运行的实现代码：
<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">Archived</option> <option value="4">Draft</option> </select>
$('.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+），无需额外插件，适用于各类表单联动场景，是提升用户体验的实用技巧。
