how to change second drop-down based on first option selection and third drop-down based on second option selection

Question

Please can someone help me - I want the second drop-down to change based on a selection from the first option and also the third drop-down to change based on a second selected option. Here is my html:

<select name="selectLevel" id="selectLevel" >
     <option value="">-- select a level --</option>
     <option value="jhs">Junior High School</option>
     <option value="shs">Senior High School</option>
     <option value="tertiary 3">Tertiary</option>
</select>

<select name="selectSubject" id="selectSubject">
    <option value=""> -- select a subject -- </option>
    <option data-value="jhs" value="english">English Language</option>
    <option data-value="shs" value="maths">Mathematics</option>
    <option data-value="tertiary" value="IT">Business Math</option> 
</select>

<select name="selectTopic" id="selectTopic" >
    <option value=""> -- select a topic -- </option>
    <option data-value="jhs">Spelling</option>
    <option data-value="shs">Matrix</option>
    <option data-value="tertiary">Calculus</option>        
</select>

And here is my script:

 $(document).ready(function(){
   $('#jhs').change(function(){
     if($(this).data('options') == undefined){
     $(this).data('options', $('#selectSubject option').clone());
 }
 var id = $(this).val();
 var options = $(this).data('options').filter('[data-value=' + id + ']');
 $('#selectSubject').html(options).show();
});

$('#selectSubject').change(function(){
  if($(this).data('options') == undefined){
    $(this).data('options', $('#selectTopic option').clone());
 }
 var id = $(this).val();
 var options = $(this).data('options').filter('[data-value=' + id + ']');
 $('#selectTopic').html(options).show();
});
});

Thank You very much!

Answer 1

I change a little bit to make it easier.

When we change the first select, it will check the second select's option and change its value.

After that, it will trigger the second select's change event and so on.

$(document).ready(function() {

  // Save all selects' id in an array 
  // to determine which select's option and value would be changed
  // after you select an option in another select.
  var selectors = ['selectLevel', 'selectSubject', 'selectTopic']

  $('select').on('change', function() {
    var index = selectors.indexOf(this.id)
    var value = this.value

    // check if is the last one or not
    if (index < selectors.length - 1) {
      var next = $('#' + selectors[index + 1])

      // Show all the options in next select
      $(next).find('option').show()
      if (value != "") {
        // if this select's value is not empty
        // hide some of the options 
        $(next).find('option[data-value!=' + value + ']').hide()
      }
      
      // set next select's value to be the first option's value 
      // and trigger change()
      $(next).val($(next).find("option:first").val()).change()
    }
  })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="selectLevel" id="selectLevel">
     <option value="">-- select a level --</option>
     <option value="jhs">Junior High School</option>
     <option value="shs">Senior High School</option>
     <option value="tertiary">Tertiary</option>
</select>

<select name="selectSubject" id="selectSubject">
    <option value=""> -- select a subject -- </option>
    <option data-value="jhs" value="english">English Language</option>
    <option data-value="shs" value="calculus">Calculus</option>
    <option data-value="tertiary" value="IT">Info Tech</option> 
</select>

<select name="selectTopic" id="selectTopic">
    <option value=""> -- select a topic -- </option>
    <option data-value="calculus">Calculus</option>
    <option data-value="calculus">Matrix</option>
    <option data-value="english">Basic English</option>
    <option data-value="english">Basic English 2</option>
    <option data-value="IT">Info Tech Studies</option>
    <option data-value="IT">Info Tech Studies 2</option>       
</select>

Answer 2

i got it u would add script CDN code in your code https://www.w3schools.com/jquery/jquery_get_started.asp just above your script code

Like this :

<select name="selectLevel" id="selectLevel" >
 <option value="">-- select a level --</option>
 <option value="jhs">Junior High School</option>
 <option value="shs">Senior High School</option>
 <option value="tertiary 3">Tertiary</option>

<select name="selectSubject" id="selectSubject">
<option value=""> -- select a subject -- </option>
<option data-value="jhs" value="english">English Language</option>
<option data-value="shs" value="maths">Mathematics</option>
<option data-value="tertiary" value="IT">Business Math</option> 

<select name="selectTopic" id="selectTopic" >
<option value=""> -- select a topic -- </option>
<option data-value="jhs">Spelling</option>
<option data-value="shs">Matrix</option>
<option data-value="tertiary">Calculus</option>        
</select>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
   $('#selectLevel').change(function(){
     if($(this).data('options') == undefined){
     $(this).data('options', $('#selectSubject option').clone());
 }
 var id = $(this).val();
 var options = $(this).data('options').filter('[data-value=' + id + ']');
 $('#selectSubject').html(options).show();
});

$('#selectSubject').change(function(){
  if($(this).data('options') == undefined){
    $(this).data('options', $('#selectTopic option').clone());
 }
 var id = $(this).val();
 var options = $(this).data('options').filter('[data-value=' + id + ']');
 $('#selectTopic').html(options).show();
});
}); 

Answer 3

You can do this by Ajax request.