如何根据使用 javascript 的另一个输入字段禁用某些选择按钮的选项？

Question

我有一个带有 3 个选项的选择按钮。我上面还有另一个文本框。根据文本框的值，我想使用 javascript 禁用其中一个选项。

这是我的 HTML 代码：

<label for="name">Name of the candidate: </label><br>
<input type="text" name="e_name" value="<%=e.getName() %>" onfocus="ViewType(this.value);">
<br><br>
<label for="division">Choose Division</label><br>
<select name="e_division" id="selectbtn"><option>Select One</option><option>MECH</option><option>CSE</option><option>CE</option></select>

这是我的 JavaScript 代码：

function ViewType(val){
var op=document.getElementById("selectbtn");
for(var i=0;i<=op.length();i++){
if(val == "Amit"){
op.option[1].disabled=true;
op.option[2].disabled=true;
}
}
}

这里的意思是如果名称是“Amit”，那么只有“MECH”选项可见。对于任何其他名称，所有选项都将可见。

Answer 1

我在下面的代码中使用了onkeyup 事件，这样每当用户输入任何名称时，都会调用该函数来执行必要的操作。

演示代码：

function ViewType(val) {

  var op = document.getElementById("selectbtn").getElementsByTagName("option");
  for (var i = 0; i < op.length; i++) {
    if (val.toLowerCase() == "amit") {
      //checking if option value is not mceh 
      if (op[i].value != "MECH") {
        //disable other option
        op[i].disabled = true;
      }
    } else {
      //enable all options
      op[i].disabled = false;
    }
  }
}

<label for="name">Name of the candidate: </label><br>
<input type="text" name="e_name" onKeyup="ViewType(this.value);">
<br><br>
<label for="division">Choose Division</label><br>
<select name="e_division" id="selectbtn">
  <option>Select One</option>
  <option value="MECH">MECH</option>
  <option value="CSE">CSE</option>
  <option value="CE">CE</option>
</select>

Answer 2

HTML

<label for="name">Name of the candidate: </label><br>
<input id="candidate-name" type="text" name="e_name" value="" onfocus="ViewType(this.value);">
<br><br>
<label for="division">Choose Division</label><br>
<select name="e_division" id="selectbtn">
  <option>Select One</option>
  <option value="MECH">MECH</option>
  <option>CSE</option>
  <option>CE</option>
</select>

JS

var candidate = document.getElementById("candidate-name");

candidate.addEventListener("change", viewType);

function viewType() {
  var select = document.getElementById("selectbtn");
  var op = select.getElementsByTagName("option");

  if(candidate.value == "Amit") {
    op[2].disabled = true;
    op[3].disabled = true;
  }
}