var request = new XMLHttpRequest() 

request.open('GET', 'https://raw.githubusercontent.com/David-Haim/CountriesToCitiesJSON/master/countriesToCities.json', true) // последний параметр указывает на синхронность или асинхронность запроса. В данном случае запрос асинхронный


request.onreadystatechange = function(){ //обработчик изменения статуса запроса. Статус == 4 сигнализирует о том, что запрос окончен.
    if (request.readyState != 4){
        return;
    }

    if (request.status == 200){
        alert('all ok')
        console.log(JSON.parse(request.responseText))
        var object = JSON.parse(request.responseText);

        
        var keys = Object.keys(object);
        var select = document.createElement("select");
        for (var i = 0; i < keys.length; i++) {
            var option = document.createElement("option");
            option.innerHTML = keys[i];
            option.value = keys[i];
            select.appendChild(option);
        }
        select.onchange = function(e){
            console.log(this.value)
            var select = document.createElement("select");
            for (var i = 0; i < object[this.value].length; i++) {
                var option = document.createElement("option")
                option.innerHTML = object[this.value][i];
                

                select.appendChild(option);
                
            }
            if(document.body.children.length === 3){
                document.body.replaceChild(select, document.getElementById("main").nextElementSibling);
            }
            else
                document.body.appendChild(select);
        }
        document.body.appendChild(select);
        select.id = "main"
            }
            else {
                alert('shit happens: ' +  xhr.status + ', ' + xhr.statusText );
            }
        }

request.send()