如何使用javascript在另一个下拉列表中选择下拉选项

Question

如果选择了BSIT，BSCS等（全部BS），我想禁用Grade 11和Grade 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'); \t 
 
    } 
 
    else 
 
    { 
 
     document.getElementById('course').setAttribute('disabled', true); 
 
     document.getElementById('year_level').setAttribute('disabled', true); 
 
    } 
 
}

<div class="control-group"> 
 
\t <label class="control-label" for="inputPassword">Type:</label> 
 
\t <div class="controls"> 
 
\t  <select name="type" id="type" required> 
 
\t \t  <option></option> 
 
\t \t  <option>Student</option> 
 
\t \t  <option>Teacher</option> 
 
\t \t  <option>Staff</option> 
 
\t \t  <option></option> 
 
      </select> 
 
\t </div> 
 
</div> 
 
\t 
 
<div class="control-group"> 
 
\t <label class="control-label" for="inputPassword">Course Type:</label> 
 
\t <div class="controls"> 
 
\t \t <select name="course" id="course" required> 
 
\t \t \t <option></option> 
 
\t \t \t <option>BSIT</option> 
 
\t \t \t <option>BSCS</option> 
 
\t \t \t <option>BSHRM</option> 
 
\t \t \t <option>BSBM</option> 
 
\t \t \t <option>BSTM</option> 
 
\t \t \t <option>STEM</option> 
 
\t \t \t <option>TOP</option> 
 
\t \t \t <option>GAS</option> 
 
\t \t \t <option>HUMSS</option> 
 
\t \t </select> 
 
\t </div> 
 
</div>  
 
<div class="control-group"> 
 
\t <label class="control-label" for="inputPassword">Year Level:</label> 
 
    <div class="controls"> 
 
\t \t <select name="year_level" id="year_level"> 
 
\t \t \t <option> </option> 
 
\t \t \t <option>First Year</option> 
 
\t \t \t <option>Second Year</option> 
 
\t \t \t <option>Third Year</option> 
 
\t \t \t <option>Fourth Year</option> 
 
\t \t \t <option>Grade 11</option> 
 
\t \t \t <option>Grade 12</option> 
 
\t \t </select> 
 
\t </div> 
 
</div>

谢谢您的答复，这将帮助我为我的项目谢谢。

Answer 1

与您已有的类似，您需要为课程元素添加一个onchange监听器。

document.getElementById("course").onchange = function() {} 

然后加入ID对等级11级和12个方案，这样就可以在DOM中找到他们。

<option id="grade-11">Grade 11</option> 
<option id="grade-12">Grade 12</option> 

最后，听平变化值，并相应修改选项。

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'); \t 
 
    } 
 
    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) { 
 
\t \t document.getElementById("grade-11").setAttribute("disabled", true); 
 
\t \t document.getElementById("grade-12").setAttribute("disabled", true); 
 
    } else { 
 
\t \t document.getElementById("grade-11").removeAttribute("disabled"); 
 
\t \t document.getElementById("grade-12").removeAttribute("disabled"); 
 
    } 
 
}

<div class="control-group"> 
 
\t <label class="control-label" for="inputPassword">Type:</label> 
 
\t <div class="controls"> 
 
\t  <select name="type" id="type" required> 
 
\t \t  <option></option> 
 
\t \t  <option>Student</option> 
 
\t \t  <option>Teacher</option> 
 
\t \t  <option>Staff</option> 
 
\t \t  <option></option> 
 
      </select> 
 
\t </div> 
 
</div> 
 
\t 
 
<div class="control-group"> 
 
\t <label class="control-label" for="inputPassword">Course Type:</label> 
 
\t <div class="controls"> 
 
\t \t <select name="course" id="course" required> 
 
\t \t \t <option></option> 
 
\t \t \t <option>BSIT</option> 
 
\t \t \t <option>BSCS</option> 
 
\t \t \t <option>BSHRM</option> 
 
\t \t \t <option>BSBM</option> 
 
\t \t \t <option>BSTM</option> 
 
\t \t \t <option>STEM</option> 
 
\t \t \t <option>TOP</option> 
 
\t \t \t <option>GAS</option> 
 
\t \t \t <option>HUMSS</option> 
 
\t \t </select> 
 
\t </div> 
 
</div>  
 
<div class="control-group"> 
 
\t <label class="control-label" for="inputPassword">Year Level:</label> 
 
    <div class="controls"> 
 
\t \t <select name="year_level" id="year_level"> 
 
\t \t \t <option> </option> 
 
\t \t \t <option>First Year</option> 
 
\t \t \t <option>Second Year</option> 
 
\t \t \t <option>Third Year</option> 
 
\t \t \t <option>Fourth Year</option> 
 
\t \t \t <option id="grade-11">Grade 11</option> 
 
\t \t \t <option id="grade-12">Grade 12</option> 
 
\t \t </select> 
 
\t </div> 
 
</div>

Answer 2

首先添加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'); 

    } 

    } 

});