javascriptを使用して別のドロップダウンメニューでオプションを無効にする方法

Question

BSIT、BSCSなど（すべてのBS）が選択されている場合は、Grade 11およびGrade 12を無効にします。 STEM、TOP、GAS、HUMSSが選択されていれば、Grade 11とGrade 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() {} 

あなたがDOMにそれらを見つけることができるようにし、グレード11、12年生のオプションにIDを追加します。

<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"); 
    } 
} 

！オプションの要素は、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'); 

    } 

    } 

});