您的位置：首页 > 其它

行政区划(全国省市区县和乡镇)查询 + 英文励志语录

2018-02-07 20:38 447 查看

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： ajax api

相关文章推荐

新的分享

章节导航