JSFiddle - React, Tailwind, and code Playground

by Bhumika107

HTML

Course: 
<select name="coursename" id="coursename">
<option value="xyz" rel="xyz">XYZ</option>
<option value="abc" rel="abc">ABC</option>
</select>

Semester: 
<select name="semno" id="sem">
<option value="one" class="xyz" rel="pClass">I</option>
<option value="two" class="xyz" rel="qClass">II</option>
<option value="three" class="abc" rel="rClass">III</option>
</select>

Subject: 
<select name="subnm" id="subnm">
<option value="p" class="pClass">p</option>
<option value="q" class="qClass">q</option>
<option value="r" class="rClass">r</option>
</select>

JavaScript

var $cat = $('select[name="coursename"]'),
$items = $('select[name="semno"]'),
$third = $('select[name="subnm"]');
$cat.change(function(){
  var $this = $(this).find(':selected'),
      rel = $this.attr('rel'),
      $set = $items.find('option.' + rel);

  if ($set.size() < 0) {
      $items.hide();
      return;
  }

  $items.show().find('option').hide();

  $set.show().first().prop('selected', true);
  $items.trigger("change");
});

$items.change(function(){
  var $this = $(this).find(':selected'),
      rel = $this.attr('rel'),
      $set = $third.find('option.' + rel);

  if ($set.size() < 0) {
      $third.hide();
      return;
  }

  $third.show().find('option').hide();

  $set.show().first().prop('selected', true);
});