行政區劃(全國省市區縣和鄉鎮)查詢 + 英文勵志語錄
阿新 • • 發佈：2019-02-09
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> select{ width: 150px; } </style> </head> <body> <select id="sheng"> </select> <select id="shi"> <option>選擇市</option> </select> <select id="qu"> <option>選擇區</option> </select> <div id="box"></div> <script src="../tool.js"></script> <script> var _url =" https://route.showapi.com/1211-1";//https://www.showapi.com/ ajax({ url : _url, dataType : "json", data : { showapi_appid : 56344, showapi_sign : "b83d4d24869d4d22a317b5879cb33ba3" }, success : function(data){ var result = data.showapi_res_body.data[0]; $("#box").innerHTML = result.english + "<br/>" + result.chinese; } }) // 載入省份 function sheng(){ var _url = "http://route.showapi.com/1149-1"; ajax({ url : _url, dataType : "json", data : { showapi_appid : 29550, showapi_sign : "08402fce064a484baad949d9a18f75e7", level : 1 }, success : function(data){ var html = ""; var result = data.showapi_res_body.data; result.forEach(function(obj){ html += `<option value="${obj.id}">${obj.areaName}</option>`; }) ajax({/*第二頁*/ url : _url, dataType : "json", data : { showapi_appid : 29550, showapi_sign : "08402fce064a484baad949d9a18f75e7", level : 1, page : 2 }, success : function(data){ var result = data.showapi_res_body.data; result.forEach(function(obj){ html += `<option value="${obj.id}">${obj.areaName}</option>`; }) $("#sheng").innerHTML = html; } }) } }) } sheng(); $("#sheng").onchange = function(){ var _url = "http://route.showapi.com/1149-2"; ajax({ url : _url, dataType : "json", data : { showapi_appid : 29550, showapi_sign : "08402fce064a484baad949d9a18f75e7", parentId : this.value }, success : function(data){ var html = ""; var result = data.showapi_res_body.data; result.forEach(function(obj){ html += `<option value="${obj.id}">${obj.areaName}</option>`; }) /*當省選項發生改變時，即使獲取當前省的子城市，並且改變區*/ $("#shi").innerHTML = html; qu(); } }) } $("#shi").onchange = function(){ qu(); } function qu(){ var _url = "http://route.showapi.com/1149-2"; ajax({ url : _url, dataType : "json", data : { showapi_appid : 29550, showapi_sign : "08402fce064a484baad949d9a18f75e7", parentId : $("#shi").value }, success : function(data){ var html = ""; var result = data.showapi_res_body.data; result.forEach(function(obj){ html += `<option value="${obj.id}">${obj.areaName}</option>`; }) $("#qu").innerHTML = html; } }) } </script> </body> </html>