使用JavaScript禁用下拉菜单

Question

There are two drop down boxes, when I select option 5 in first drop down then another drop down box should be disabled. While, drop down values are fetched from database.

 <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

I have added change handler for dropdown1, and in the handler check for the selected value and based on that disable the other dropdown.

Please see below runnable code snippet. I hope this is what you are expecting.

 $('#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

you should try this

HTML

<select id="ddl1" onchange='fnChange()'>
  <option value="one">One</option>
  <option value="two">Two</option>
  <option value="three">Three</option>
  <option value="Four">Four</option>
  <option value="five">Five</option>
</select>

<select id="ddl2">
  <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>

JQuery

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script type="text/javascript">
function fnChange(){

    if($('#ddl1').val()== "Four") {
        $('#ddl2').prop("disabled", true);
    } else {
      $('#ddl2').prop("disabled", false);
    }

}

</script>

i hope this will work

Answer 3

we can disabled the dropdown box in following manner : Example - In html -

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

now in js code write :

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

}

run this function whenever required.