'Populating select list with value & inner HTML when user country information has been gathered

I'm currently making a country information app for a project I'm undertaking. On load the app must gather the users location (which it does) and then use the user country variable to populate a select list (the user's country must be the first item and the visible item in the list before the list is clicked by the user. enter image description here

In addition the list must also be populated by the rest of the countries in the world. I am doing this by parsing a JSON file containing the names of every country in the world then using a loop to populate the list with these countries.

I have tried using prepend to add the users country to be first in the list and therefore displayed on page load. The users country does appear first once the list is clicked but on page load the country name visible in the select box is the first country name populated by the JSON file and not where the user is actually located. See image below:- enter image description here

Here is my code:-

customscripts.js

function getUserLocation() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(function (position) {
            let latitude = position.coords.latitude;
            let longitude = position.coords.longitude;
            var latlng = new L.LatLng(latitude, longitude);
            map.setView(latlng, 5);
            map.addLayer(worldStreetMap);
            L.marker(latlng).addTo(map);
            
            $.ajax({
                url: "php/getUserCountry.php",
                type: 'POST',
                dataType: 'json',
                data: {
                    latLng: `${latitude},${longitude}`
                },
                success: function(result) {
    
                    if (result.status.name == "ok") {
                    

                        countryCode = result.data.results[0].components["ISO_3166-1_alpha-3"];
                        let userCountry = result.data.results[0].components["country"];
                        $('#select-country').prepend(`<option value="${countryCode}">${userCountry}</option>`);
                        
                        getBorder(countryCode);
                        getCountryInfo(countryCode);
                        getCovid(countryCode);
                    }
                
                },
                error: function(jqXHR, textStatus, errorThrown) {
                    // your error code
                } 
                
            });

            
        });
    } else {
        alert("Geolocation is not supported by this browser.");
    }
}

function populateCountriesList() {

    $.ajax({
        type: "GET",
        url: "php/populateCountriesList.php",
        dataType: "json",
        success: function(data) {
            
            for(let i = 0; i < data['data'].length; i++){
                $('#select-country').append(`<option value="${data['data'][i]['properties']['iso_a3']}">${data['data'][i]['properties']['name']}</option>`);
            }
            $("#select-country").prop("selectedIndex", 0);
            
        },
        error: function(jqXHR, textStatus, errorThrown) {
            alert(errorThrown + ' ' + jqXHR + ' ' + textStatus);
        }
    });
}

$('#select-country').change(function(){
    getCountryInfo(this.value);
})

Section of index.html containing the select element :-

 <body>
    <div id="loader"></div>
    <div class="container-fluid">
        <div id="map-container">
            <button id="viewport-930" class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasBottom" aria-controls="offcanvasBottom">Country Info</button>
            <div id="top-map">
            <select id="select-country" class="form-select" aria-label="Default select example">
            </select>
javascripthtmlhtml-select


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions