如果文本字段包含某个值，则禁用下拉列表

Question

我在HTML和Javascript方面遇到问题，我试图创建一个符合以下规则的条件：

如果第一个文本框包含某个单词，请禁用以下下拉列表。如果它不包含特定的单词，请保持启用状态。

到目前为止，我有这个代码

var noSample = "HW8020";
const interval = setInterval(function() {
// method to be executed;
function codeCheck() {
var x = document.getElementById("form-RequestAQuoteUK-9bbb_Products_Interest_Value").value;
}
function validateSample() {
if ( x == noSample) {
document.getElementById(
"form-RequestAQuoteUK-9bbb_DropDown_Samples_SelectedValue"
).disabled = true;
} else {
document.getElementById(
"form-RequestAQuoteUK-9bbb_DropDown_Samples_SelectedValue"
).disabled = false;
}
}
}, 5000);

noSample变量是当输入到文本字段时将禁用下拉列表的代码。ID不是我的命名选择，但我是Javascript的新手，正在努力解决我工作的公司的问题！

有什么想法吗？

Answer 1

您应该使用事件input而不是setInterval，并使用indexOf来检查input.value是否包含特定值。

var noSample = "HW8020";
let input = document.getElementById(
"form-RequestAQuoteUK-9bbb_Products_Interest_Value",
);
input.addEventListener("input", () => {
validateSample(input.value)
});
function validateSample(inputValue) {
let selectEl = document.getElementById(
"form-RequestAQuoteUK-9bbb_DropDown_Samples_SelectedValue",
);
if (inputValue.indexOf(noSample) > -1) {
selectEl.disabled = true;
} else {
selectEl.disabled = false;
}
}

Answer 2

根据注释中的建议，您可以在Products_Interest_Value输入中添加一个事件侦听器，然后根据它是否与noSample值匹配来启用或禁用下拉列表。

const noSample = "HW8020";
document.querySelector("#form-RequestAQuoteUK-9bbb_Products_Interest_Value").addEventListener("input", e => {
document.querySelector("#form-RequestAQuoteUK-9bbb_DropDown_Samples_SelectedValue").disabled = (e.target.value == noSample);
});