如何在文本框输入特定值时禁用下拉菜单？

你的代码有几个关键问题导致逻辑不生效，我帮你修正并优化：

原代码的问题 #

• codeCheck函数里的x是局部变量，validateSample根本访问不到，会直接报错x is not defined
• 定时器里定义了两个函数，但从来没调用过，等于白写
• 用5秒轮询的方式太笨重，不如监听输入事件实时响应

修正后的代码 #

// 触发禁用的特定值
const noSample = "HW8020";
// 获取文本框和下拉菜单元素（提前获取，避免重复查询DOM）
const productInput = document.getElementById("form-RequestAQuoteUK-9bbb_Products_Interest_Value");
const sampleDropdown = document.getElementById("form-RequestAQuoteUK-9bbb_DropDown_Samples_SelectedValue");

// 定义核心检查逻辑
function checkAndToggleDropdown() {
  // 判断输入值是否等于特定值，直接赋值给disabled属性
  sampleDropdown.disabled = productInput.value === noSample;
}

// 给文本框添加输入事件监听，输入变化时立即执行检查
productInput.addEventListener("input", checkAndToggleDropdown);

// 页面加载时先执行一次，确保初始状态正确
checkAndToggleDropdown();

代码说明 #

• 提前获取DOM元素，避免每次检查都重新查询，提升性能
• 用input事件替代定时器，用户输入时实时响应，体验更流畅
• 简化判断逻辑：直接把比较结果赋值给disabled属性，代码更简洁
• 页面加载时执行一次检查，防止页面初始化时下拉菜单状态不符合预期

这样修改后，就能实现你要的效果：当文本框输入HW8020时，下拉菜单自动禁用；输入其他内容时，下拉菜单恢复启用。

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