如何使用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'); 

    } 

    } 

});