javascript - Populating Drop down list from selection to another drop down value not show

Question

Im having a trouble on how can I populate data to my third dropdown.
I have three dropdown, firstly when I click my first dropdown the second dropdown will populate list based on the value of my first dropdown and below my code it works fine.
The problem is, I want to populate list to my third dropdown when I click second dropdown but it didn't show anything.

var mealsByCategory = 
    { A: [ 'San Francisco', 'Manila', 'Kirishima' ] 
    , B: [ 'b', 'bb', 'bbb', 'bbbb' ] 
    , C: [ 'c', 'ccc', 'cccc', 'ccccc', 'cccccc' ] 
    } 
var Mprovinces = 
    { A: [ 'San Francisco', 'Manila', 'Kirishima' ] 
    , B: [ 'b', 'bb', 'bbb', 'bbbb' ] 
    , C: [ 'c', 'ccc', 'cccc', 'ccccc', 'cccccc' ] 
    } 
    
function changemeal(value) {
  $('#category').prop('disabled', false);
  if (value.length == 0) document.getElementById("category").innerHTML = "<option></option>";
  else {
    var catOptions = "";
    for (categoryId in mealsByCategory[value]) {
      catOptions += "<option>" + mealsByCategory[value][categoryId] + "</option>";
    }
    document.getElementById("category").innerHTML = catOptions;
  }
}

function changecat(value) {
  $('#provinces').prop('disabled', false);
  if (value.length == 0) document.getElementById("provinces").innerHTML = "<option></option>";
  else {
    var catOptions1 = "";
    for (categoryId in Mprovinces[value]) {
      catOptions1 += "<option>" + Mprovinces[value][categoryId] + "</option>";
    }
    document.getElementById("provinces").innerHTML = catOptions1;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select onChange="changemeal(this.value);">
  <option value="" disabled selected>Select Province</option>
  <option value="A">Usa</option>
  <option value="B">Japan</option>
  <option value="C">China</option>
</select>

<select name="category" id="category" onChange="changecat(this.value);" disabled>
  <option disabled selected>Select</option>
  <option value="A">Usa</option>
  <option value="B">Japan</option>
  <option value="C">China</option>
</select>

<select name="provinces" id="provinces" disabled>
  <option value="" disabled selected>Select</option>
</select>

Answer 1

my way...

const f_Geo = document.getElementById('geographia-form')
 , selOrder = [ 'region', 'land', 'city' ] // hierarchical order of selects
 , treeData =
    [ { id:  1, name: 'USA',           parentID:  0 }
    , { id:  2, name: 'Japan',         parentID:  0 }
    , { id:  3, name: 'Europe',        parentID:  0 }
    , { id:  4, name: 'California',    parentID:  1 }
    , { id:  5, name: 'Oklahoma',      parentID:  1 }
    , { id:  6, name: 'Arizona',       parentID:  1 }
    , { id:  7, name: 'Kant?',         parentID:  2 }
    , { id:  8, name: 'Kansai',        parentID:  2 }
    , { id:  9, name: 'Chügoku',       parentID:  2 }
    , { id: 10, name: 'France',        parentID:  3 }
    , { id: 11, name: 'Deutschland',   parentID:  3 }
    , { id: 12, name: 'Espana',        parentID:  3 }
    , { id: 13, name: 'Sacramento',    parentID:  4 }
    , { id: 14, name: 'Los Angeles',   parentID:  4 }
    , { id: 15, name: 'San Diego',     parentID:  4 }
    , { id: 16, name: 'Tulsa',         parentID:  5 }
    , { id: 17, name: 'Oklahoma City', parentID:  5 }
    , { id: 18, name: 'Lawton',        parentID:  5 }
    , { id: 19, name: 'Phoenix',       parentID:  6 }
    , { id: 20, name: 'Flagstaff',     parentID:  6 }
    , { id: 21, name: 'Tucson',        parentID:  6 }
    , { id: 21, name: 'Tokyo',         parentID:  7 }
    , { id: 22, name: 'Chiba',         parentID:  7 }
    , { id: 23, name: 'Tochigi',       parentID:  7 }
    , { id: 24, name: 'Kyoto',         parentID:  8 }
    , { id: 25, name: 'Osaka',         parentID:  8 }
    , { id: 26, name: 'Nara',          parentID:  8 }
    , { id: 27, name: 'Tottori',       parentID:  9 }
    , { id: 28, name: 'Hirochima',     parentID:  9 }
    , { id: 29, name: 'Okayama',       parentID:  9 }
    , { id: 30, name: 'Quimper',       parentID: 10 }
    , { id: 31, name: 'Toulouse',      parentID: 10 }
    , { id: 32, name: 'Nancy',         parentID: 10 }
    , { id: 33, name: 'Dusseldorf',    parentID: 11 }
    , { id: 34, name: 'Leipzig',       parentID: 11 }
    , { id: 35, name: 'Munchen',       parentID: 11 }
    , { id: 36, name: 'Barcelona',     parentID: 12 }
    , { id: 37, name: 'Sevilla',       parentID: 12 }
    , { id: 38, name: 'Guernica',      parentID: 12 }
    ]
  ;
f_Geo.onsubmit=e=>e.preventDefault()  // disable submit
  ;
f_Geo.onchange=e=>
  {
  //if (!e.target.matches('select')) return  
  setSubSelects(e.target.name)
  }
function setSelect(name,id)
  {
  f_Geo[name].innerHTML = '' // clear select
  treeData.filter(el=>el.parentID===id)
          .forEach(el=>{ f_Geo[name].add( new Option(el.name, el.id)) })
  }
function setSubSelects(selectName)
  {
  let idx = selOrder.findIndex(x=>x===selectName) +1
  if (idx < selOrder.length)
    {
    let sName = selOrder[idx]
    setSelect ( sName,  +f_Geo[selectName].value )
    setSubSelects(sName)
    }
  }

setSelect('region',0)
setSubSelects('region')

<form action="" id="geographia-form">
  <select name="region"></select>
  <select name="land"></select>
  <select name="city"></select>
</form>