使用 JavaScript 禁用下拉菜单

Question

有两个下拉框，当我在第一个下拉列表中选择选项 5 时，应该禁用另一个下拉框。同时，下拉值是从数据库中获取的。

<tr>
   <td class="outside scrollable-menu"
      style="border-style: none; border-bottom-style: none;">
      Education<span
         style="color: red;">*</span> 
      <form:select
         path="educationBean.educationId" id="education"
         class="form-control modalEdit">
         <form:option hidden="hidden" value="">Education</form:option>
         <c:forEach items="${educationList}" var="education">
            <form:option value="${education.educationId}">${education.educationName}
            </form:option>
         </c:forEach>
      </form:select>
   </td>
   <td class="outside scrollable-menu"
      style="border-style: none; border-bottom-style: none;">
      Degree<span
         style="color: red;">*</span> 
      <form:select
         path="degreeBean.degreeId" id="degree"
         class="form-control modalEdit">
         <form:option hidden="hidden" value="">Degree</form:option>
         <c:forEach items="${degreeList}" var="degree">
            <form:option value="${degree.degreeId}">${degree.degreeName}
            </form:option>
         </c:forEach>
      </form:select>
   </td>
</tr>

<script>
    function disableDegree() {
        if (document.getElementById("education").value === "5") {
            document.getElementById("deg").disabled = "true";
        } else {
            document.getElementById("deg").disabled = "false";
        }
    }
</script>

Answer 1

我为 dropdown1 添加了更改处理程序，并在处理程序中检查所选值并在此基础上禁用另一个下拉菜单。

请看下面的可运行代码sn-p。我希望这是你所期待的。

$('#Dropdown1').on('change', function() {
    if($(this).val()== "5") {
        $('#Dropdown2').prop("disabled", true);
    } else {
      $('#Dropdown2').prop("disabled", false);
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<select id="Dropdown1">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
</select>

<select id="Dropdown2">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

Answer 2

我们可以通过以下方式禁用下拉框： 例子 - 在 html -

<select id="mySelect">
   <option>Apple</option>
   <option>Pear</option>
   <option>Banana</option>
   <option>Orange</option>
</select>

现在用js代码写：

function disable(){
document.getElementById("mySelect").disabled = true;

}

在需要时运行此函数。