JSFiddle - React, Tailwind, and code Playground

by f0084rrrr

HTML

<!DOCTYPE html>
<html>

  <head>
  </head>

  <body>
    <select name="slc1" id="slc1" onchange="_1sel();"></select>
    <select name="slc2" id="slc2" onchange="_2sel();"></select>
    <select name="slc3" id="slc3" onchange="_3sel();"></select>
    <select name="slc4" id="slc4"></select>

  </body>

</html>

JavaScript

/*insert all below into <script></script> in html and it works... */

var slc1 = document.getElementById("slc1");
var slc2 = document.getElementById("slc2");
var slc3 = document.getElementById("slc3");
var slc4 = document.getElementById("slc4");

var dataObj = { //is a valid json
  "brazil": {
    "sp": {
      "sp1": ["sp1A", "sp1B"],
      "sp2": ["sp2A"]
    },
    "mg": {
      "mg1": ["mg1A", "mg1B"],
      "mg2": ["mg2A", "mg1B"]
    },
    "rj": {
      "rj1": ["rj1A", "rj1B", "rj1C"],
      "rj2": ["rj2A", "rj1B"]
    }
  },
  "usa": {
    "ny": {
      "ny1": ["ny1A", "ny1B", "ny1C"],
      "ny2": ["ny2A"]
    },
    "tx": {
      "tx1": ["tx1A"]
    }
  },
  "uk": {
    "ld": {
      "ld1": ["ld1A", "ld1B", "ld1C"],
      "ld2": ["ld2A"]
    },
    "hm": {
      "hm1": ["hm1A", "hm1B"]
    }
  }
}

let ctrs = Object.keys(dataObj);
cmo(ctrs, slc1);
_1sel();
//slc1.value = "usa"
//slc1.dispatchEvent(new Event('change'));

function _1sel() {
  slc2.innerHTML = "";
  let cities = Object.keys(dataObj[slc1.value]);
  cmo(cities, slc2);
  _2sel();
}

function _2sel() {
  slc3.innerHTML = "";
  let zones = Object.keys(dataObj[slc1.value][slc2.value]);
  cmo(zones, slc3);
  _3sel();
}

function _3sel() {
  slc4.innerHTML = "";
  let staffs = dataObj[slc1.value][slc2.value][slc3.value];
  cmo(staffs, slc4);
}

function cmo(arr, s) { //create mult opt
  arr.forEach(o => {
    let opt = document.createElement("option");
    opt.value = o;
    opt.innerHTML = o;
    s.add(opt);
  });
}