Disable the drop down using JavaScript

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>

3 Answers
3

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>

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.

you should try this

document.getElementById("deg").disabled = true;

i hope this will work

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.