Sheva77
/
homework


			
				
					
						
						
							12345678910111213141516171819202122232425262728293031323334353637383940
							<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
    </head>

    <body>
        <select name="country" id="countrySelect">
            Country
        </select>
        <select name="city" id="citySelect">
            City
        </select>
        <script>
            let newOption = function (someValue) {
                let op = document.createElement("option");
                op.setAttribute("value", someValue);
                op.append(someValue);
                return op;
            };

            fetch("https://raw.githubusercontent.com/russ666/all-countries-and-cities-json/master/countries.json")
                .then((res) => res.json())
                .then((data) => {
                    console.log(data);
                    for (let country in data) countrySelect.append(newOption(country));

                    countrySelect.onchange = () => {
                        citySelect.innerHTML = "";
                        for (let city of data[countrySelect.value]) citySelect.append(newOption(city));
                    };

                    countrySelect.onchange();
                });
            console.log(1);
        </script>
    </body>
</html>