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>
|