有两个下拉框,当我在第一个下拉列表中选择选项 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>
最佳答案
我为 dropdown1 添加了更改处理程序,并在处理程序中检查所选值,并基于该值禁用其他下拉列表。
请参阅下面的可运行代码片段。我希望这正是您所期待的。
$('#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>
关于javascript - 使用 JavaScript 禁用下拉菜单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51133425/