Arseniy_Yurchenko
/
Home_work_3


			
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455
							<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <form action="">
        <select id="countrySelect" name=""></select>
        <select id="citySelect" name=""></select>
    </form>

    <script>

        //1
        fetch('https://raw.githubusercontent.com/russ666/all-countries-and-cities-json/master/countries.json')
            .then(res => res.json())
            .then(json => {

                let jsObj = json
                for (let key in jsObj) {

                    let countryOption = document.createElement('option');
                    let countrySelect = document.getElementById('countrySelect');

                    countryOption.innerHTML = key;
                    countrySelect.appendChild(countryOption);


                }
                document.querySelector('#countrySelect').addEventListener('change', function () { // Замыкание
                    let cities = jsObj[this.value]

                    citySelect.length = 0;

                    for (const iterator of cities) {

                        let cityOption = document.createElement('option');
                        let citySelect = document.getElementById('citySelect');

                        cityOption.innerHTML = iterator;
                        citySelect.appendChild(cityOption);
                    }
                })
            })

    </script>
</body>

</html>