DmitriyPanasenko
/
homework


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263
							<!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">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <script>
/*countries and cities
fetch('https://raw.githubusercontent.com/russ666/all-countries-and-cities-json/master/countries.min.json').then(res => res.json())
     .then(data => {
            //эта функция запускается когда данные скачиваются.
            //остальной код работает РАНЬШЕ.
            //только ТУТ есть переменная data со скачанными данными
            console.log(data) //изучите структуру, получаемую с сервера в консоли
        })
По аналогии с предыдущем заданием, реализуйте интерфейс выбора страны и города:
по закрузке данных наполняйте select#countries элементами option с названиями стран;
так же назначьте обработчик события onchange в select#countries, который:
удаляет старый контент select#cities (достаточно занести в innerHTML или innerText пустую строку)
добавляет в select#cities элементы option с городами из выбранной только что страны.
Таким образом, при изменении страны будет меняться список городов в select#cities*/

{
    fetch('https://raw.githubusercontent.com/russ666/all-countries-and-cities-json/master/countries.min.json').then(res => res.json())
     .then(data => {
            //эта функция запускается когда данные скачиваются.
            //остальной код работает РАНЬШЕ.
            //только ТУТ есть переменная data со скачанными данными
            console.log(data) //изучите структуру, получаемую с сервера в консоли

            const countries = document.createElement('select')
            const cities = document.createElement('select')

            for (country in data){
                const optionCounty = document.createElement('option')
                optionCounty.innerText = optionCounty.value = country
                countries.append(optionCounty)                
            }

            countries.onchange = () => {
                cities.innerText = ''
                for (city of data[countries.value]){
                    const optionCity = document.createElement('option')
                    optionCity.innerText = optionCity.value = city
                    cities.append(optionCity)

                }
            }

            document.body.append(countries)
            document.body.append(cities)

        })

}

    </script>
</body>
</html>