I'm working on a small website and I currently have two dropdowns in my form, both are below:

<select name="classType" id="classType" required>
   <option value="" disabled selected>Select Your Class Type</option>
   <option value = "Beginner">Beginner</option>
   <option value = "Intermediate">Intermediate</option>
   <option value = "Advanced">Advanced</option>          
</select>
<br/>

<select name="studentType" id="studentType" required>
    <option value="" disabled selected>Select Your Student Type</option>
    <option value = "lowerLevel">Lower Level</option>
    <option value = "upperLevel">Upper Level</option>
</select>
<br/>

I've experimented with some javascript but only at a beginner level. I was wondering if there's a way to disable a specific value in the studentType dropdown.

So for example if i select "Beginner" in the first dropdown then the option for "UpperLevel" in the second dropdown should be disabled.

This is what I tried, but it was not working:

var dropdown = document.getElementById("classType"); 
dropdown.onchange = function(event){ 
    if (dropdown.value == "Beginner") { 
        // .....

Any ideas?

Thanks!

I'm working on a small website and I currently have two dropdowns in my form, both are below:

<select name="classType" id="classType" required>
   <option value="" disabled selected>Select Your Class Type</option>
   <option value = "Beginner">Beginner</option>
   <option value = "Intermediate">Intermediate</option>
   <option value = "Advanced">Advanced</option>          
</select>
<br/>

<select name="studentType" id="studentType" required>
    <option value="" disabled selected>Select Your Student Type</option>
    <option value = "lowerLevel">Lower Level</option>
    <option value = "upperLevel">Upper Level</option>
</select>
<br/>

I've experimented with some javascript but only at a beginner level. I was wondering if there's a way to disable a specific value in the studentType dropdown.

So for example if i select "Beginner" in the first dropdown then the option for "UpperLevel" in the second dropdown should be disabled.

This is what I tried, but it was not working:

var dropdown = document.getElementById("classType"); 
dropdown.onchange = function(event){ 
    if (dropdown.value == "Beginner") { 
        // .....

Any ideas?

Thanks!

• javascript
• jquery
• html

• So show your Javascript :-) – ESP32 Commented Apr 18, 2016 at 17:12
• I deleted my script as it wasnt working. but it was something along the lines of var dropdown = document.getElementById("classType"); dropdown.onchange = function(event){ if(dropdown.value=="Beginner"){ ..... – Mo A Commented Apr 18, 2016 at 17:15

4 Answers 4

You can achieve this by hooking an event handler to the change event of the first select which sets the disabled property of the relevant option in the second select based on the chosen option, something like this:

$('#classType').change(function() {
    $('#studentType option[value="upperLevel"]').prop('disabled', $(this).val() == 'Beginner')
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="classType" id="classType" required>
  <option value="" disabled="true" selected="true">Select Your Class Type</option>
  <option value="Beginner">Beginner</option>
  <option value="Intermediate">Intermediate</option>
  <option value="Advanced">Advanced</option>
</select><br/>

<select name="studentType" id="studentType" required>
  <option value="" disabled="true" selected="true">Select Your Student Type</option>
  <option value="lowerLevel">Lower Level</option>
  <option value="upperLevel">Upper Level</option>
</select><br/>

By jQuery:

$('#studentType option[value="upperLevel"]').attr('disabled','disabled');

This should fit your needs: http://codepen.io/themeler/pen/yOjWXB

<select name="classType" id="classType" required>
   <option value="" disabled selected>Select Your Class Type</option>
   <option value = "Beginner">Beginner</option>
   <option value = "Intermediate">Intermediate</option>
   <option value = "Advanced">Advanced</option>          
</select>
<br/>

<select name="studentType" id="studentType" required>
    <option value="" disabled selected>Select Your Student Type</option>
    <option value="lowerLevel">Lower Level</option>
    <option value="upperLevel">Upper Level</option>
</select>
<br/>

$(function () {
  var $class   = $('#classType'),
      $student = $('#studentType');

  $class.on('change', function () {
    var $this = $(this),
        $ul   = $student.find('[value="upperLevel"]');
    // clear value of student type on class type change
    $student.find(':selected').prop('selected', false);
    $student.find('option:first-child').prop('selected', true);
    // lock / unlock position
    if ($this.val() === 'Beginner') {
      $ul.prop('disabled', true);
    } else {
      $ul.prop('disabled', false);
    }
  });

});

Here is how I would do it, add a data-enabled tag to each option like this:

<select name="classType" id="classType" required>
    <option value="" disabled selected>Select Your Class Type</option>
    <option value = "Beginner" data-enabled="lowerLevel">Beginner</option>
    <option value = "Intermediate" data-enabled="lowerLevel,upperLevel">Intermediate</option>
    <option value = "Advanced" data-enabled="upperLevel">Advanced</option>          
</select>
<br/>

<select name="studentType" id="studentType" required>
    <option value="" disabled selected>Select Your Student Type</option>
    <option value = "lowerLevel">Lower Level</option>
    <option value = "upperLevel">Upper Level</option>
</select>
<br/>

And on change of the drop down, disable all options in the other drop down, then loop through and see if they're either in the enabled tag of the selected, or blank like this:

$('#classType').on('change', function(){
    var allowed = $('#classType option:selected').attr('data-enabled').split(',');
    $('#studentType option').attr('disabled','disabled');
    $('#studentType option').each(function(){
        if (allowed.indexOf($(this).val()) > -1 || !$(this).val()) {
            $(this).removeAttr('disabled');
        }
    });
});