How to make a dropdown selection refresh

Question

I have two dropdowns whose content is depended on each other. Basically when I choose a name from the first dropdown the second one should show the last names that belong to that specific name chosen. If I chose another name, another list of last names should load on the second dropdown accordingly.

I can get the right last names only for the first selected option in the dropdown. Once I select another name, the last names remain the same. How can I code it so it changes with every selection?

Until now I have this as an event listener which doesn't seem to work. Note that the first dropdown id is names and the second one is lastnames

$(document).on("click", "#names", function(evt) {
    $('.wide-control').selector('refresh'); 
});

All the elements on the dropdowns load once the application starts from my javascript function

function getNames() {      
    var url = config.api.server + config.api.uri + "/names";
    $.getJSON(url).done(function(response) {
        if (!response.length) {
            console.warn("Empty list");
        }
        config.namess = response;
        // console.log(response);

        $.map(config.namess, function(item) {
            $("#names").append($('<option>').text(item.namestring));
        });

        var SelectedName = $("#names").find("option:selected").text();

        function getLastNames() {   
            var url = config.api.server + config.api.uri + "/lasts";
            $.getJSON(url).done(function(answer){
                if (!answer.length) {
                    console.warn("Empty list");
                }
                config.lasts = answer;
                // console.log(answer);

                answer.forEach(function(LastItem) {
                    if (Selected === LastItem.NameString) {
                        var x = LastItem;
                        var lastNames = [];          
                        lastNames.push(x);

                        $.map(lastNames, function(i) {
                            $("#lastNames").append($('<option>').text(i.fullName));
                        });  
                    }       
                });
            }).fail(function(data, status, error) {
                console.error("Something went wrong");
            });
        }
        getLastNames();
    }).fail(function(data, status, error) {
        console.error("Something went wrong");
    });
}