功能需求：
- 未选择省级时市级和区级无法选择
- 未选择市级时无法选择区级
- 选择相应的省级时市级会出现相对应省级的市
- 选择相应的市级时区级会出现相对应市级的区
- 省市区全部选择完之后再重新选择省时要把区级的清空
这其实是个挺简单的功能，就是我刚开始写的时候思路没有捋清楚，导致写的时候很困难。写代码前一定要先捋清思路，先写伪代码。下面请看代码（有注释很清晰了）。主要就是功能，所以我就没有写样式，如果有需要请大家自己添加把。
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实现的三级联动功能，会有很多不足的地方，请多多指教！
