城市三级联动
2019-03-14 本文已影响0人
Wo信你个鬼
cc.png
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.test {
margin-top: 50px;
text-align: center;
}
</style>
</head>
<body>
<div class="test">
<select name="province" class="province">
<option selected="selected" disabled="disabled" value="null">请选择</option>
</select>
<select name="city" class="city">
<option selected="selected" disabled="disabled" value="null">请选择</option>
</select>
<select name="area" class="area">
<option selected="selected" disabled="disabled" value="null">请选择</option>
</select>
</div>
<script type="text/javascript">
let province = document.querySelector(".province"),
city = document.querySelector(".city"),
_area = document.querySelector(".area");
let pUrl = "js/province.json",
cUrl = "js/city.json",
AUrl = "js/area.json";
function myAjax(_type, _url, callback) {
let xhr = new XMLHttpRequest();
xhr.open(_type, _url);
xhr.send();
xhr.addEventListener("readystatechange", () => {
if(xhr.readyState == 4 && xhr.status == 200) {
let result = JSON.parse(xhr.responseText);
//console.log(result)
callback(result)
}
})
}
//封装option元素的函数
function createOpt(parent, data) {
for(let i = 0; i < data.length; i++) {
let _opt = "<option value = " + data[i].id + ">" + data[i].name + "</option>";
parent.innerHTML += _opt;
}
}
//请求省份的数据
myAjax("get", pUrl, function(res) {
console.log(res)
createOpt(province, res)
})
//选择省份，联动城市
province.addEventListener("change", () => {
//selectedIndex表示用来获取选中的下标值
let index = province.selectedIndex; //选中选项的下标值
//options表示下列框的所有选项
let pId = province.options[index].value; //选中选项的value值
console.log(pId);
myAjax("get", cUrl, function(cRes) {
cRes.forEach((val, index) => {
if(val.preId == pId) {
city.innerHTML = "";
createOpt(city, val.list)
}
})
selCity();//获取省份，联动地区
})
})
//选择城市，联动区
city.addEventListener("change",selCity);
function selCity(){
//获取省份的id
let pId = province.options[province.selectedIndex].value;
//获取城市的id
let cId = city.options[city.selectedIndex].value;
myAjax("get",AUrl,function(aRes){//获取地区数据
console.log(aRes);
aRes.forEach((aVal)=>{
if (aVal.preId == pId) {
aVal.list.forEach((aValue)=>{
if (aValue.preId == cId) {
_area.innerHTML="";
createOpt(_area, aValue.list1);
}
})
}
})
})
}
</script>
</body>
</html>
