|
|
@@ -0,0 +1,58 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html>
|
|
|
+ <head>
|
|
|
+ <title>TODO supply a title</title>
|
|
|
+ <meta charset="UTF-8">
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
+ </head>
|
|
|
+ <body>
|
|
|
+ <select name="s1" id="s1"></select>
|
|
|
+ <select name="c1" id="c1"></select>
|
|
|
+ <p id='ww'></p>
|
|
|
+ <script>
|
|
|
+var xhr = new XMLHttpRequest();
|
|
|
+xhr.open('GET', 'https://raw.githubusercontent.com/David-Haim/CountriesToCitiesJSON/master/countriesToCities.json', false);
|
|
|
+xhr.send();
|
|
|
+
|
|
|
+if (xhr.status !== 200) {alert( xhr.status+xhr.statusText);} else {var sP = JSON.parse(xhr.responseText);};
|
|
|
+
|
|
|
+var v1 = document.getElementById('s1');
|
|
|
+for (let key in sP) {
|
|
|
+ let optC = document.createElement('option');
|
|
|
+ v1.appendChild(optC);
|
|
|
+ optC.innerHTML = key;
|
|
|
+ optC.value = key;
|
|
|
+};
|
|
|
+
|
|
|
+var v2 = document.getElementById('c1');
|
|
|
+
|
|
|
+v1.onchange = function () {
|
|
|
+ var tv1 = v1.value;
|
|
|
+ while (v2.firstChild) {
|
|
|
+ v2.removeChild(v2.firstChild);
|
|
|
+ }
|
|
|
+ for (let i = 0; i <sP[tv1].length; i++) {
|
|
|
+ let optS = document.createElement('option');
|
|
|
+ v2.appendChild(optS);
|
|
|
+ optS.innerHTML = sP[tv1][i];
|
|
|
+ optS.value = sP[tv1][i];}};
|
|
|
+
|
|
|
+v2.onchange = function () {
|
|
|
+ var headV = v2.value;
|
|
|
+ var xhr = new XMLHttpRequest();
|
|
|
+ var request = "select * from weather.forecast where woeid in (select woeid from geo.places(1) where text=\"" + headV + "\") and u='c'";
|
|
|
+ request = encodeURIComponent(request);
|
|
|
+ xhr.open('GET', 'https://query.yahooapis.com/v1/public/yql?q=' + request + '&format=json', false);
|
|
|
+ xhr.send();
|
|
|
+ if (xhr.status !== 200) {
|
|
|
+ alert( xhr.status + ': ' + xhr.statusText);
|
|
|
+ } else {
|
|
|
+ let ww1 = JSON.parse(xhr.responseText);
|
|
|
+ let ww2= document.getElementById('ww');
|
|
|
+ let ww3 = ww1.query.results.channel.item.description;
|
|
|
+ ww2.innerHTML = ww3;
|
|
|
+ }
|
|
|
+};
|
|
|
+ </script>
|
|
|
+ </body>
|
|
|
+</html>
|
