原生JS实现省市三级联动 Ajax
时间：2019-10-30 15:37:40
收藏：0
阅读：106
首先找到某网站的api地址获取到已经写好的省市编码，然后写网络接口
对于一个初学者来说，开始用的都是别人已经写好的api；
接下来 ，我找的是YY天气的数据接口API：http://api.yytianqi.com/citylist/id/2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
#province,#city,#town{
width: 80%;
overflow: hidden;
margin: 10px auto;
}
#province li,#city li,#town li{
float: left;
width: 60px;
height: 30px;
background-color: black;
color: hsl(173, 25%, 94%);
text-align: center;
line-height: 30px;
margin-left: 10px;
margin-top: 5px;
}
</style>
<body>
<ul id="province">
<!-- <li>湖北</li>
<li>上海</li>
<li>湖南</li> -->
</ul>
<hr>
<ul id="city"> </ul>
<hr>
<ul id="town"></ul>
</body>
<script>
var provinceUL = document.getElementById("province");
var cityUL = document.getElementById("city");
var townUL = document.getElementById("town");
var xhr = new XMLHttpRequest();
xhr.open("get","http://api.yytianqi.com/citylist/id/2",true);
xhr.send();
xhr.onreadystatechange = function(){
if(xhr.readyState == 4 && xhr.status == 200){
var result = xhr.responseText;
var obj = JSON.parse(result);
var provinceList = obj["list"];
provinceList.forEach(function(province){
var {
city_id,
name,
list
} = province;
var li = document.createElement("li");
li.innerHTML = name;
li.dataId = city_id;
li.className = "provinceli";
li.cityList = list;
provinceUL.appendChild(li);
li.onclick = function(){
cityUL.innerHTML = "";
var cityList = this.cityList;
cityList.forEach(function(city){
var {
city_id,
name,
list
} = city;
var cityLi = document.createElement("li");
cityLi.dataId = city_id;
cityLi.townList = list;
cityLi.innerHTML = name;
cityLi.className = "cityli";
cityUL.appendChild(cityLi);
cityLi.onclick = function(){
var townList = this.townList;
if(townList){
townUL.innerHTML = "";
townList.forEach(function(town){
var {
city_id,
name
} = town;
var townLi = document.createElement("li");
townLi.innerHTML = name;
townLi.dataId = city_id;
townLi.className = "townli";
townUL.appendChild(townLi);
})
}else{
townUL.innerHTML = "";
}
}
})
}
})
}
}
document.onclick = function(e){
var evt = window.event || e;
switch(evt.target.className){
case "provinceli":
setColor(evt.target);
break;
case "cityli":
setColor(evt.target);
break;
case "townli":
setColor(evt.target);
break;
}
}
function setColor(li){
var ul = li.parentNode;
var ulList = ul.getElementsByTagName("li");
for(var i = 0;i < ulList.length;i++){
ulList[i].style.backgroundColor = "black";
}
li.style.backgroundColor = "#156444";
}
</script>
</html>
原文：https://www.cnblogs.com/dl1314/p/11765187.html
评论（0）