[英]How to disable the option in dropdown by selecting in another dropdown using javascript
如果选择了任何BSIT,BSCS等(所有BS),则我想禁用11年级和12年级; 但如果选择STEM,TOP,GAS和HUMSS,则将启用11级和12级,并启用所有BS。
var disable_options = false; document.getElementById('type').onchange = function () { //alert("You selected = "+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); } }
<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>STEM</option> <option>TOP</option> <option>GAS</option> <option>HUMSS</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> <option>Grade 11</option> <option>Grade 12</option> </select> </div> </div>
谢谢您的回复,它将对我的项目有所帮助。
与您已经拥有的类似,您需要向课程元素添加一个onchange
侦听器。
document.getElementById("course").onchange = function() {}
然后将ID添加到11年级和12年级选项中,以便可以在DOM中找到它们。
<option id="grade-11">Grade 11</option>
<option id="grade-12">Grade 12</option>
最后,监听onchange值并相应地修改选项。
document.getElementById('course').onchange = function() {
if (["BSCS", "BSIT"].indexOf(this.value) > -1) {
document.getElementById("grade-11").setAttribute("disabled", true);
document.getElementById("grade-12").setAttribute("disabled", true);
} else {
document.getElementById("grade-11").removeAttribute("disabled");
document.getElementById("grade-12").removeAttribute("disabled");
}
}
而已! 当课程元素为“ BSCS”或“ BSIT”时,选项元素可以具有禁用的属性,并且不能选择
完整代码
var disable_options = false; document.getElementById('type').onchange = function () { //alert("You selected = "+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); } } document.getElementById('course').onchange = function() { if (["BSCS", "BSIT"].indexOf(this.value) > -1) { document.getElementById("grade-11").setAttribute("disabled", true); document.getElementById("grade-12").setAttribute("disabled", true); } else { document.getElementById("grade-11").removeAttribute("disabled"); document.getElementById("grade-12").removeAttribute("disabled"); } }
<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>STEM</option> <option>TOP</option> <option>GAS</option> <option>HUMSS</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> <option id="grade-11">Grade 11</option> <option id="grade-12">Grade 12</option> </select> </div> </div>
首先将value="value"
添加到<option>
元素,以便可以一致地读取值。 即: <option value="bsit">BSIT</option>
, <option value="grade12">Grade 12</option>
等。
document.getElementById('course').addEventListener('change', function(){
if(this.value && this.value.substr(0, 2) === 'bs'){
// if a "bs" option is selected, disable grade 11 and 12 options
document.querySelector('[value="grade11"]').setAttribute('disabled', '');
document.querySelector('[value="grade12"]').setAttribute('disabled', '');
}else{
// remove all disabled attributes from options
var disabledOptions = document.querySelectorAll('option[disabled]'),
i, l = disabledOptions.length;
for(i = 0; i < l; ++i){
disabledOptions[i].removeAttribute('disabled');
}
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.