![](/img/trans.png)
[英]jQuery disable other dropdown values based on selected value of other dropdown
[英]Enable or disable dropdowns based on selected value in other dropdown using javascript
當我從下拉列表中選擇“ Student
選項時,我想從元素中刪除屬性。 如果選擇“ Teacher
”或“ Staff
,則課程和年份級別將被禁用,但是如果選擇“ Student
,它將啟用“ 謝謝”的響應 。
HTML:
<div class="control-group">
<label class="control-label" for="inputPassword">Type:</label>
<div class="controls">
<select name="type" id="type" required>
<option></option>
<option>Student</option>
<option>Teacher</option>
<option>Staff</option>
<option></option>
</select>
</div>
</div>
<div class="control-group">
<label class="control-label" for="inputPassword">Course Type:</label>
<div class="controls">
<select name="course" id="course" required>
<option></option>
<option>BSIT</option>
<option>BSCS</option>
<option>BSHRM</option>
<option>BSBM</option>
<option>BSTM</option>
<option>COE</option>
<option></option>
</select>
</div>
</div>
<div class="control-group">
<label class="control-label" for="inputPassword">Year Level:</label>
<div class="controls">
<select name="year_level" id="year_level">
<option> </option>
<option>First Year</option>
<option>Second Year</option>
<option>Third Year</option>
<option>Fourth Year</option>
</select>
</div>
</div>
這是JavaScript:
<script>
document.getElementById('type').onchange = function () {
var obj = document.getElementById('course').setAttribute('disabled',this.value=='Student');
document.getElementById('course').setAttribute('disabled',this.value=='Teacher');
document.getElementById('year_level').setAttribute('disabled',this.value=='Teacher');
obj.setAttribute('disabled');
obj.removeAttribute('disabled');
}
</script>
要再次啟用下拉菜單,您需要使用以下代碼刪除disabled
屬性:
document.getElementById('course').removeAttribute('disabled');
我已經編輯了您的JSFIDDLE DEMO 。 這是代碼:
document.getElementById('type').onchange = function () {
alert("selected value = "+this.value);
if(this.value == "Student")
{
document.getElementById('course').removeAttribute('disabled');
document.getElementById('year_level').removeAttribute('disabled');
}
else
{
document.getElementById('course').setAttribute('disabled', true);
document.getElementById('year_level').setAttribute('disabled', true);
}
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.