How to set selected text from database into populated cascading dropdown List with JSON Data

Question

I follow this tutorial with title Cascading Dropdown List using JSON Data - Learn Infinity https://www.youtube.com/watch?v=T79I5jOJlGU&t=11s

I have 4 select tags ( -region -province -municipality -barangay )

First I populate the dropdown list from JSON DATA

I achieve the first one that I have to select a specific region first before the province gets populate.

What I want to achieve next is to set selected text from the database into cascading dropdown.

HTML CODE:

<form name="addressForm">
  <select name="region" id="region">
    <option value="">Select Region</option>
  </select>
  <select name="province" id="province">
    <option value="">Select Province</option>
  </select>
  <select name="municipality" id="municipality">
    <option value="">Select Municipality</option>
  </select>
  <select name="barangay" id="barangay">
    <option value="">Select Barangay</option>
  </select>
</form>

JS CODE

$(document).ready(function(e){
    function get_json_data(code,region) {
        //alert("a " + code)
        var html_code = "";
        $.getJSON('/templates/ph_API/CombineAddress.json', function(data){
            ListName = code.substr(0, 1).toUpperCase() + code.substr(1);
            html_code += '<option value="">Select ' + ListName + '</option>';
            $.each(data, function(key, value) {
                if(value.region == region) {
                    html_code += '<option value="' + value.code + '">' + value.name + '</option>';
                }
            });
            $('#' + code).html(html_code);
        });
    }
    get_json_data('region', 0);

    $(document).on('change', '#region', function() {
        var region_id = $(this).val();
        if (region_id != '') {
            get_json_data('province', region_id);
        } else {
            $('#province').html('<option value="">Select Province</option>');
        }
        $('#municipality').html('<option value="">Select Municipality</option>');
        $('#barangay').html('<option value="">Select Barangay</option>');
    });

    $(document).on('change', '#province', function() {
        var province_id = $(this).val();
        if (province_id != '') {
            get_json_data('municipality', province_id);
        } else {
            $('#municipality').html('<option value="">Select Municipality</option>');
        }
    });

    $(document).on('change', '#municipality', function() {
        var municipality_id = $(this).val();
        if (municipality_id != '') {
            get_json_data('barangay', municipality_id);
        } else {
            $('#barangay').html('<option value="">Select Barangay</option>');
        }
    });

    $("#region option:selected").text('{{ form.region.value }}');
    $("#province option:selected").text('{{ form.province.value }}');
    $("#municipality option:selected").text('{{ form.municipality.value }}');
    $("#barangay option:selected").text('{{ form.barangay.value }}');
});

In last 4 line of code with

$("#region option:selected").text('{{ form.region.value }}');
$("#province option:selected").text('{{ form.province.value }}');
$("#municipality option:selected").text('{{ form.municipality.value }}');
$("#barangay option:selected").text('{{ form.barangay.value }}');

It set the text from the database into a dropdown but the populate function not working unless I change the selected region first to get load the next dropdown list "province"

I Update it here's the JSON FILE DATA

[
//List for Region drop down
 { "code": "001", "name": "Metro Manila" , "region": "000" },
 { "code": "002", "name": "Mindanao" , "region": "000" },

//Province for Metro Manila / Mindanao
 {"code": "0010", "name": "Metro Manila", "region": "001" },
 { "code": "0011", "name": "Agusan Del Norte", "region": "002" },

//Municipality for Metro Manila / Agusan Del Norte
 { "code": "00025", "name": "Caloocan City", "region": "0010" },
 { "code": "00026", "name": "Ermita", "region": "0010" },
 { "code": "00027", "name": "Buenavista", "region": "0011", },
 { "code": "00028", "name": "BUTUAN CITY", "region": "0011", },

//Barangay for Caloocan City / Ermita
 { "code": "000041", "name": "Tandang", "region": "00025", },
 { "code": "000042", "name": "Manila, "region": "00025", },
 { "code": "000041", "name": "Imus", "region": "00026", },
 { "code": "000042", "name": "Tarlac, "region": "00026", },

//Barangay for Buenavista / BUTUAN CITY"
 { "code": "000041", "name": "Rizal", "region": "00027", },
 { "code": "000042", "name": "Tayak, "region": "00027", },
 { "code": "000041", "name": "Liliw", "region": "00028", },
 { "code": "000042", "name": "Quezon, "region": "00028", },
]