<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<style type="text/css">
.test{
text-align: center;
}
</style>
<div class="test">
<select name="province" class="province">
<option selected="selected" disabled value="">请选择</option>
</select>
<select name="city" class="city">
<option selected disabled value="">请选择</option>
</select>
<select name="area" class="area">
<option value="">请选择</option>
</select>
</div>
<script type="text/javascript">
let province = document.querySelector(".province"),
city = document.querySelector(".city"),
_area = document.querySelector(".area");
//数据源，json文件地址
let pUrl = "js/province.json",
cUrl = "js/city.json",
aUrl = "js/area.json";
//封装ajax函数，获取数据
function myAjax(_type,_url,callback){
let xhr = new XMLHttpRequest();
xhr.open(_type,_url);
xhr.send();
xhr.addEventListener("readystatechange",function(){
if(xhr.readyState==4 && xhr.status==200){
let result = JSON.parse(xhr.responseText);
callback(result);
}
});
}
//封装创建option元素的函数
function creataOpt(parent,data){
for(let i=0;i<data.length;i++){
//创建option元素，并设置value属性的值为数据库里相应的id值，内容为相应的name（如广东）
let _opt = "<option value="+data[i].id+">"+data[i].name+"</option>";
parent.innerHTML += _opt;
}
}
//请求省份数据，并渲染省份数据
myAjax("get",pUrl,function(res){
console.log('省份',res);
creataOpt(province,res);
});
//选择省份，联动城市
//当选择的option发生变更时触发
province.addEventListener("change",function(){
//selectedIndex选中选项的下标值
let index = province.selectedIndex;
//options表示下拉框的所有选项
//获取选择的option的value值
let pId = province.options[index].value;
//请求城市的数据
myAjax("get",cUrl,function(cRes){
console.log('城市',cRes);
//遍历城市数据的内容
cRes.forEach((val,index)=>{
//判断：如果数据中的preId和选择的option的value值相同，就渲染相应的城市数据
if(val.preId === pId){
//每次渲染数据前将city内的option清空，以免出现叠加
city.innerHTML = "";
creataOpt(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;
console.log(pId,cId);
//获取区的数据
myAjax('get',aUrl,function(aRes){
console.log('地区',aRes);
//遍历区数据
aRes.forEach((aVal)=>{
//判断：如果区的preId等于省份的pId
if(aVal.preId==pId){
console.log(aVal);
//就再遍历区等于省份中的aVal
aVal.list.forEach((aValue)=>{
//判断:如果这些数据等于选择的城市的cId，就渲染区的数据
if(aValue.preId == cId){
//创建option前先清空区里的内容
_area.innerHTML = "";
creataOpt(_area,aValue.list1);
}
})
}
})
})
}
</script>
</body>
</html>
网友评论