How to edit update multiple dependent drop downs

I have three drop-downs Country, States, and City that are dependent, data is loaded based on parent-child relationship on Sign up page.

When I edit the data on the Update page then the fetched data for country, states and city is perfectly fine but when I change country value to some other value as I want other values in states and city it shows blank. How can this be even possible?

<script>
  //working for update form
  var stateObjectt = {
    "India": {
      "Delhi": ["new Delhi", "North Delhi"],
      "Kerala": ["Thiruvananthapuram", "Palakkad"],
      "Goa": ["North Goa", "South Goa"],
      "Uttar Pardesh": ["Mirzapur", "Varanasi", "Chandauli"]
    },
    "Australia": {
      "South Australia": ["Dunstan", "Mitchell"],
      "Victoria": ["Altona", "Euroa"]
    },
    "Canada": {
      "Alberta": ["Acadia", "Bighorn"],
      "Columbia": ["Washington", ""]
    },
  }
  window.onload = function() {
    var countySel = document.getElementById("countySel"),
      stateSel = document.getElementById("stateSel"),
      districtSel = document.getElementById("districtSel");
    for (var country in stateObjectt) {
      countySel.options[countySel.options.length] = new Option(country, country);
    }
    countySel.onchange = function() {
      stateSel.length = 1; // remove all options bar first
      districtSel.length = 1; // remove all options bar first
      if (this.selectedIndex < 1) return; // done 
      for (var state in stateObjectt[this.value]) {
        stateSel.options[stateSel.options.length] = new Option(state, state);
      }
    }
    countySel.onchange(); // reset in case page is reloaded
    stateSel.onchange = function() {
      districtSel.length = 1; // remove all options bar first
      if (this.selectedIndex < 1) return; // done 
      var district = stateObjectt[countySel.value][this.value];
      for (var i = 0; i < district.length; i++) {
        districtSel.options[districtSel.options.length] = new Option(district[i], district[i]);
      }
    }
  }
</script>

Select Country
<select class="m-1 form-control" name="country" id="countySel" size="1" required>
  <option>
    <?php echo $show['country']; ?>
  </option>
</select>
Select State
<select class="m-1 form-control" name="state" id="stateSel" size="1" required>
  <option>
    <?php echo $show['state']; ?> </option>
</select>
Select District
<select class="m-1 form-control" name="city" id="districtSel" size="1" required>
  <option>
    <?php echo $show['city']; ?>
  </option>
</select>