Javascript fetching code instead of name within Django

This is a javascript that I have found in github, this is the link for it.

The problem is that when I used the ph-address-selector.js, it works but instead of fetching the “display name”, it fetches the “code ids”, which is the true value of the input when I ask ChatGPT about it. Also you can see the same issue from some user.

So I tried the modified javascript code so that it will use the same URL I used to connect it to my base.html, which extends all of my scripts to all of my html templates.

ph-address-selector.js

var my_handlers = {
    // fill province
    fill_provinces: function() {
        var region_code = $(this).val();
        var region_text = $(this).find("option:selected").text();
        $('#region-text').val(region_text);
        $('#province-text').val('');
        $('#city-text').val('');
        $('#barangay-text').val('');

        let dropdown = $('#province');
        dropdown.empty().append('<option selected="true" disabled>Choose State/Province</option>');

        let city = $('#city');
        city.empty().append('<option selected="true" disabled></option>');

        let barangay = $('#barangay');
        barangay.empty().append('<option selected="true" disabled></option>');

        $.getJSON(provinceUrl, function(data) {
            var result = data.filter(value => value.region_code == region_code);
            result.sort((a, b) => a.province_name.localeCompare(b.province_name));
            $.each(result, function(key, entry) {
                dropdown.append($('<option></option>').attr('value', entry.province_code).text(entry.province_name));
            });
        });
    },
    // fill city
    fill_cities: function() {
        var province_code = $(this).val();
        var province_text = $(this).find("option:selected").text();
        $('#province-text').val(province_text);
        $('#city-text').val('');
        $('#barangay-text').val('');

        let dropdown = $('#city');
        dropdown.empty().append('<option selected="true" disabled>Choose city/municipality</option>');

        let barangay = $('#barangay');
        barangay.empty().append('<option selected="true" disabled></option>');

        $.getJSON(cityUrl, function(data) {
            var result = data.filter(value => value.province_code == province_code);
            result.sort((a, b) => a.city_name.localeCompare(b.city_name));
            $.each(result, function(key, entry) {
                dropdown.append($('<option></option>').attr('value', entry.city_code).text(entry.city_name));
            });
        });
    },
    // fill barangay
    fill_barangays: function() {
        var city_code = $(this).val();
        var city_text = $(this).find("option:selected").text();
        $('#city-text').val(city_text);
        $('#barangay-text').val('');

        let dropdown = $('#barangay');
        dropdown.empty().append('<option selected="true" disabled>Choose barangay</option>');

        $.getJSON(barangayUrl, function(data) {
            var result = data.filter(value => value.city_code == city_code);
            result.sort((a, b) => a.brgy_name.localeCompare(b.brgy_name));
            $.each(result, function(key, entry) {
                dropdown.append($('<option></option>').attr('value', entry.brgy_code).text(entry.brgy_name));
            });
        });
    },

    onchange_barangay: function() {
        var barangay_text = $(this).find("option:selected").text();
        $('#barangay-text').val(barangay_text);
    },
};

$(function() {
    $('#region').on('change', my_handlers.fill_provinces);
    $('#province').on('change', my_handlers.fill_cities);
    $('#city').on('change', my_handlers.fill_barangays);
    $('#barangay').on('change', my_handlers.onchange_barangay);

    let dropdown = $('#region');
    dropdown.empty().append('<option selected="true" disabled>Choose Region</option>');
    $.getJSON(regionUrl, function(data) {
        $.each(data, function(key, entry) {
            dropdown.append($('<option></option>').attr('value', entry.region_code).text(entry.region_name));
        });
    });
});

base.html

<script>
  var provinceUrl = "{% static 'ph-json/province.json' %}";
  var cityUrl = "{% static 'ph-json/city.json' %}";
  var barangayUrl = "{% static 'ph-json/barangay.json' %}";
  var regionUrl = "{% static 'ph-json/region.json' %}";
</script>
<script src="{% static 'ph-json/ph-address-selector.js' %}"></script>

This is the value that I got when I checked the database