Mo A Mo A - 7 months ago 51
Javascript Question

Disable specific option in specific dropdown

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 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>

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?



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=""></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 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>