如何用jQuery禁用与输入框内容相同的下拉框选项

首先需要补充对应的输入框（你提供的代码仅包含下拉框），然后通过jQuery监听输入变化，实时匹配并禁用对应选项：

完整HTML代码 #

<input type="text" id="inputText" placeholder="输入内容">
<select class="form-control" id="select2">
   <option value="1">New</option>
   <option value="2">OLD</option>
</select>

jQuery实现代码 #

$(document).ready(function() {
  // 监听输入框的实时输入事件
  $('#inputText').on('input', function() {
    // 获取输入框内容，转小写并去除首尾空格
    const inputContent = $(this).val().trim().toLowerCase();
    
    // 遍历下拉框的所有选项
    $('#select2 option').each(function() {
      // 获取选项文本，同样转小写去空格
      const optionText = $(this).text().trim().toLowerCase();
      
      // 匹配则禁用该选项，不匹配则恢复启用
      $(this).prop('disabled', optionText === inputContent);
    });
  });
});

关键说明 #

• 用input事件而非keyup，能覆盖键盘输入、鼠标粘贴等所有内容变更场景
• 统一转小写对比，实现大小写不敏感匹配（比如输入NEW也能匹配选项New）
• 每次输入都会重新检查所有选项，确保其他未匹配的选项能正常启用

内容的提问来源于stack exchange，提问作者sakshi