JSFiddle - React, Tailwind, and code Playground

HTML

<select name="country_12345" id="country_12345">
    <option value="0">--Select--</option>
    <option value="1">Country One</option>
    <option value="2">Country Two</option>
    <option value="3">Country Three</option>
</select>

<select name="city_12345" id="city_12345">
    <option value="0">--Select--</option>
    <option value="101">City One Country One</option>
    <option value="102">City Two Country One</option>
    <option value="103">City One Country Two</option>
    <option value="104">City Two Country Two</option>
    <option value="105">City One Country Three</option>
    <option value="106">City Two Country Three</option>
</select>

JavaScript

var CountryOne = [
   {display: "City One Country One", value: "101" },
   {display: "City Two Country One", value: "102" }];

 var CountryTwo = [
   {display: "City One Country Two", value: "103" },
   {display: "City Two Country Two", value: "104" }];

 var CountryThree = [
   {display: "City One Country Three", value: "105" },
   {display: "City Two Country Three", value: "106" }];

$("#country_12345").change(function() {
  var parent = $(this).val();
  switch(parent){
    case '1':
      list(CountryOne);
      break;
    case '2':
      list(CountryTwo);
      break;             
    case '3':
      list(CountryThree);
      break;  
    default: //default child option is blank
      $("#city_12345").html('');  
      break;
  }
});
function list(array_list)
{
  $("#city_12345").html(""); //reset child options
  $(array_list).each(function (i) { //populate child options
    $("#city_12345").append("<option value=\""+array_list[i].value+"\">"+array_list[i].display+"</option>");
  });
}