How to disable the option in dropdown by selecting in another dropdown using javascript

Question

I want to disable the Grade 11 and Grade 12, if any BSIT, BSCS, etc (all BS) are selected; but if STEM, TOP, GAS and HUMSS are selected the Grade 11 and Grade 12 will be enabled and all BS will be enabled.

 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> 

Thank you for your response and it will help me for my project thank you.

Answer 1

Similar to what you have already, you need to add an onchange listener to the course element.

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

Then add ID's to the grade 11 and grade 12 options, so that you can find them in the DOM.

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

Finally, listen to the onchange value and modify the options accordingly.

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

That's it! The option elements can take the disabled attribute and cannot be selected when the course element is "BSCS" or "BSIT"

Full code

 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> 

Answer 2

First add value="value" to the <option> elements, so you can read the values consistently. ie: <option value="bsit">BSIT</option> , <option value="grade12">Grade 12</option> , etc.

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');

    }

  }

});