功能需求:
- 未选择省级时市级和区级无法选择
- 未选择市级时无法选择区级
- 选择相应的省级时市级会出现相对应省级的市
- 选择相应的市级时区级会出现相对应市级的区
- 省市区全部选择完之后再重新选择省时要把区级的清空
这其实是个挺简单的功能,就是我刚开始写的时候思路没有捋清楚,导致写的时候很困难。写代码前一定要先捋清思路,先写伪代码。下面请看代码(有注释很清晰了)。主要就是功能,所以我就没有写样式,如果有需要请大家自己添加把。
HTML代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>三级联动功能</title>
<link href="./css/three.css" />
</head>
<body>
<form id="menu">
<!-- 省份选择 -->
<select id="one" onchange="province()">
<option value="">请选择省</option>
</select>
<!-- 城市选择 -->
<select id="two" onchange="wardenry()">
<option value="">请选择市</option>
</select>
<!-- 区选择 -->
<select id="three">
<option value="">请选择区</option>
</select>
</form>
<script src="./js/three.js"></script>
</body>
</html>
JSON数据:
[{
"province": "河南省",
"city": [{
"town": "新乡市",
"area": ["卫滨区","红旗区","高新区","牧野区"]
},{
"town": "郑州市",
"area": ["中原区","二七区","金水区","新密区"]
},{
"town": "洛阳市",
"area": ["老城区","洛龙区","孟津区"]
}]
}, {
"province": "山东省",
"city": [{
"town": "临沂市",
"area": ["兰山区","河东区","沂水区","费县"]
},{
"town": "青岛市",
"area": ["市北区","市南区","黄岛区","城阳区"]
},{
"town": "淄博市",
"area": ["淄川区","博山区","周村区","张店区"]
}]
}, {
"province": "黑龙江省",
"city": [{
"town": "哈尔滨市",
"area": ["香坊区","松北区","呼兰区","道里区"]
},{
"town": "齐齐哈尔市",
"area": ["建华区","龙沙区","铁锋区","泰来县"]
},{
"town": "鸡西市",
"area": ["鸡冠区","恒山区","梨树区","麻山区"]
}]
}]
JS代码:
// 在html中创建三个下拉选择框
// 后分别获取这三个下拉选择框
// 省
let one = document.getElementById('one');
// 市
let two = document.getElementById('two');
// 区
let three = document.getElementById('three');
// 写JSON数据
// 通过请求获取JSON的数据(要给一个变量使它变成全局的)
let data = []; //全局
let xml = new XMLHttpRequest();
xml.open('get', './js/three.json');
xml.send();
xml.onreadystatechange = function() {
if (xml.readyState == 4 && xml.status == 200) {
let text = xml.responseText;
// 请求到的数据(data已经是全局的了)
data = JSON.parse(text);
// 请求到值过后可以直接渲染(写到if判断后无法判断它是否获取到数据)
let str = "<option>请选择省</option>";
// let ones = document.getElementById('one').value
for (let i = 0; i < data.length; i++) {
// 找数组下标的省级
str += `<option value="${i}">${data[i].province}</option>`
}
// 渲染好的字符串拼接写到省份里
one.innerHTML = str;
}
}
// 添加到省级下拉框
let ones;
// 给省级下拉框绑定onchange事件
function province() {
let str = "";
// 获取的是省份下拉选择框的值
ones = document.getElementById('one').value
// console.log(ones);
// 遍历城市数组(循环查找相对应的索引)
// for循环获取省份的值的市的长度(one是省的下拉选框,ones是获取的值)
for (let i = 0; i < data[ones].city.length; i++) {
// 字符串拼接value值要变,市要变。数组的省值的城市的下标town(寻找城市)
str += `<option value="${i}">${data[ones].city[i].town}</option>`
}
// 拼接写到城市two里
two.innerHTML = str;
three.innerHTML = '<option value="">请选择区</option>';
}
function wardenry() {
let str = "";
// 获取的是城市下拉选择框的值
let twos = document.getElementById('two').value;
console.log(twos);
// 遍历区数组(循环查找相对应的索引)一步一步找,省值市值区长度
for (let i = 0; i < data[ones].city[twos].area.length; i++) {
// 字符串拼接value值要变,市要变。数组的值的城市的名字town
str += `<option value="${i}">${data[ones].city[twos].area[i]}</option>`
}
three.innerHTML = str;
}
总结:
1需要先获取三个下拉框
2let一个全局的数据为空
3请求数据 请求过后直接渲染循环拼接字符串
4给省级下拉框绑定onchange事件
5循环数组省级下拉框的值的市级的长度
6拼接省级下拉框的值的市级的下标
7给区下拉框绑定onchange事件
8循环数组省级下拉框的值的市级的值的区的长度
9省级下拉框的值的市级的值的区的下标
注意:
1.刚开始let的一个字符串为空所以渲染的数据直接就是河南
可是下拉框选项页面上的默认值应该是“请选择省/市/区”
所以给为空的字符串添加默认的option
2.省市区全部选择完毕后,我们重新选择省的时候,区是不会变的
我们给绑定的省级使书写到区级的内容为空,让其重新选择就好了。
我写的注释可能会啰嗦,我是按照自己的理解来写的,以上就是我用JS实现的三级联动功能,会有很多不足的地方,请多多指教!