Disable specific option in specific dropdown

Question

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 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
– Mo A, Commented Apr 18, 2016 at 17:15

Rory McCrossan · Accepted Answer · 2016-04-18 17:20:05Z

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.com/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/>

answered Apr 18, 2016 at 17:20

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Mo A Over a year ago

You're the best!! Works perfectly!

Rory McCrossan Over a year ago

No problem, glad to help

Mojtaba · Accepted Answer · 2016-04-18 17:23:17Z

2

By jQuery:

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

edited Apr 18, 2016 at 17:23

answered Apr 18, 2016 at 17:20

Mojtaba

5,0175 gold badges24 silver badges40 bronze badges

2 Comments

Rory McCrossan Over a year ago

This sets the option to disabled automatically on load, not only when the Beginner value is selected.

Mojtaba Over a year ago

@RoryMcCrossan, I removed extra stuff. I wanted to show how to disable. the condition is up to developer

Przemysław Melnarowicz · Accepted Answer · 2016-04-18 17:33:15Z

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

});

Caleb O'Leary · Accepted Answer · 2016-04-18 17:23:02Z

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

Collectives™ on Stack Overflow

Disable specific option in specific dropdown

4 Answers 4

2 Comments

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related