1. 效果:


2. 原理:
- 表单元素是用value传值的,也是用value提交的。
- selected:默认选中。
- disabled:禁用。
- change:监听事件 --- 事件会在域的内容改变时发生,也可用于单选框与复选框改变后触发的事件。
- selectedIndex:选中选项的下标值。
- options:表示下列框的所有选项
3. 实现代码
html
<div class="test">
<!--select 是行内元素-->
<select name="province" class="province">
<!--disabled和selected 实现效果:只读而不能选择-->
<option value="null" selected disabled>请选择</option>
</select>
<select name="city" class="city">
<option value="null" selected disabled>请选择</option>
</select>
<select name="area" class="area">
<option value="null" selected disabled>请选择</option>
</select>
</div>
css
.test{
text-align: center;
}
js
let _province = document.querySelector(".province"),
_city = document.querySelector(".city"),
_area = document.querySelector(".area");
let pUrl = "province.json",
cUrl = "city.json",
aUrl = "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 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){
createOpt(_province,res);//调用创建函数,放在_province中
});
//选择省份,联动城市:
_province.addEventListener("change",function(){
let index = _province.selectedIndex;//选中选项的下标值
//options表示下列框的所有选项
let pId = _province.options[index].value;//选中选项的value值
myAjax("get",cUrl,function(cRes){//请求城市数据
cRes.forEach((val,index)=>{
if(val.preId == pId){//匹配 --- preId是根据json找的
_city.innerHTML = "";
createOpt(_city,val.list);//调用创建函数,放在_city中
}
})
selCity();//调用函数 --- 选中省份,联动地区(即第三个sel)
})
})
//选择城市,联动地区:
_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)=>{//数组aRes的preId
if(aVal.preId == pId){//判断地区id值与省份是否匹配
aVal.list.forEach((aValue)=>{//数组aRes里面的list属性名里的数组的preId
if(aValue.preId == cId){//判断地区id值与城市是否匹配
_area.innerHTML = "";
createOpt(_area,aValue.list1);
}
})
}
})
})
}
json



匹配原理


网友评论