JSFiddle - React, Tailwind, and code Playground

by StepBaro

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.js"></script>
<label>Dropdown 1</label>
<select name="select1" id="fe296151">
  <option value="" selected="selected" disabled="disabled">Please select</option>
  <option id="main1" value="aaaa-1">aaaa-1</option>
  <option id="main2" value="bbbb-1">bbbb-1</option>
  <option id="" value="cccc-1">cccc-1</option>
</select>

<div id="divselect2">
  <label>Dropdown 2</label>
  <select name="select2" id="fe296152">
    <option value="" selected="selected" disabled="disabled">Please select</option>
    <option id="sub1" class="main1" value="aaaa-1-2.a">aaaa-1-2.a</option>
    <option id="sub1" class="main1" value="aaaa-1-2.b">aaaa-1-2.b</option>
    <option id="sub2" class="main2" value="bbbb-2.a">bbbb-2.a</option>
    <option id="sub2" class="main2" value="bbbb-2.b">bbbb-2.b</option>
    <option id="sub2" class="main2" value="bbbb-2.c">bbbb-2.c</option>
  </select>
</div>

<div id="divselect3">
  <label>Dropdown 3</label>
  <select name="select3" id="fe296154">
    <option value="" selected="selected" disabled="disabled">Please select</option>
    <option id="red1" class="sub2" value="aaaa-3.a">aaaa-3.a</option>
    <option id="" class="sub2" value="aaaa-3.b">aaaa-3.b</option>
    <option id="" class="sub2" value="bbbb-3.c">bbbb-3.c</option>
    <option id="" class="sub2" value="bbbb-3.d">bbbb-3.d</option>
  </select>
</div>

<div id="divselect3a">
  <label>input box</label>
  <input type="text" class="red1" value="" />
</div>

JavaScript

$(document).ready(function() {

  $("#divselect2").hide();
  $("#divselect3").hide();
  $("#divselect3a").hide();

  $("#fe296151").change(function() {
  /*
    if ($(this).data('options') === undefined) {
      $(this).data('options', $('#fe296152 option').clone());
    }
    */
    
    $('#divselect2').show();
    $('#divselect2 select, #divselect3 select, #divselect3a input[type="text"]').val("");
    $('#divselect3, #divselect3a').hide();
    
    
    //var options = $(this).data('options').filter('.' + fe296151);
    //$('#fe296152').html(options);
  });
  
  
  $("#fe296152").change(function() {
  	/*
    if ($(this).data('options') === undefined) {
      $(this).data('options', $('#fe296154 option').clone());
    }
    */
    
    $('#divselect3').show();
    $('#divselect3 select, #divselect3a input[type="text"]').val("");
    $('#divselect3a').hide();
    
    
    /*
    var options = $(this).data('options').filter('.' + fe296152);
    $('#fe296154').html(options);
    */
  });
  
  
  $("#fe296154").change(function() {

    $('#divselect3a').show();
    $('#divselect3a input[type="text"]').val("");
    
  });



});