JSFiddle - React, Tailwind, and code Playground

by Rejith R Krishnan

HTML

<p>
  <label>First, select a Category:</label>
  <br>
  <select id="category"></select>
</p>

<p>
  <label>Then, select a Type:</label>
  <br>
  <select id="type"></select>
</p>

JavaScript

var cateAndTypes = {
    'Select': ['Select a Category first...'],
    'Colors': ['Red', 'Blue', 'Green', 'Orange', 'Purple', 'Yellow'],
    'Shapes': ['Circle', 'Square', 'Triangle', 'Rectangle', 'Octagon'],
    'Sizes': ['Huge', 'Big', 'Small', 'Tiny'],
};


jQuery(function($) {
  CateTypes();
  function CateTypes() {
    //populate Category
    $.each(cateAndTypes, function(c, t) {
      $('#category').append('<option value=' + c + '>' + c + '</option>');
    });
    $('#category').prop('selectedIndex', 2);
    //populate Type
    $('#category').on("change",function(){
    	callBack($(this).val());
    });
    callBack($('#category').val());
//-----^^^^^^^^^^^^^^^^^^----------
  }
});

function callBack(val) {
    var $Types = $('#type');
    $Types.html("");
    var Types = cateAndTypes[val];
    $.each(Types, function (c, t) {
        $Types.append('<option>' + t + '</option>');
    });
}