js代码
let xhr = new XMLHttpRequest(); // 创建一个新的XMLHttpRequest对象，命名为xhr。用来请求接口，处理异步操作； // 这个对象用于在浏览器和服务器之间发送 HTTP 请求和接收响应。 xhr.open('get', 'js/index.json', true); // 打开一个新的HTTP GET请求。// 请求的URL是'js/index.json'。// 第三个参数true表示请求是异步的。 xhr.send(); //发送要请求的要求 xhr.onreadystatechange = function() {// 设置一个事件监听器，当请求的状态发生变化时，这个函数就会被调用。if (xhr.readyState == 4 && xhr.status == 200) {// 检查请求是否已经完成（readyState == 4）并且是否成功（status == 200）。let text = xhr.responseText;// 获取响应的文本内容data = JSON.parse(text);// 将响应的文本内容解析为JSON对象，并将其赋值给变量data。item(data);//一进页面就渲染省级的数据，以方便点击省级时展现省级的数据} }; let data = []; //创建一个变量以方便存储数据 //获取想要的变量 省 市 区 //获取省市区三个下拉框 //用class选择器获取 let shengs = document.getElementsByClassName('shengs')[0]; let shis = document.getElementsByClassName('shis')[0]; let qus = document.getElementsByClassName('qus')[0]; //省市区三级联合 // 假设这是您的省份数据 //在次选择请填写省份市都要重新渲染 // 省数据渲染 ，让一进页面就渲染 function item(data) {console.log(data)let str = "<option value=''>-请填写省份-</option>";//命名str为请填写省份for (let i = 0; i < data.length; i++) {//遍历数据和数组console.log(data[i]);str += `<option value="${i}">${data[i].name}</option> `;//拼接省级的内容}shengs.innerHTML = str;//把渲染内容添加到省的下拉框中 }// 市区数据渲染 function shi() {console.log(shengs.value)// 选完省份后市和区级下拉框变为请填写市区let str = "<option value=''>-请填写市区-</option>";//命名str为请填写市份console.log(data[shengs.value])for (let i = 0; i < data[shengs.value].children.length; i++) {//遍历省的值，也就是找省对应的市级数据//用省对应的下标去找市级数据console.log(data[shengs.value].children[i]);str += `<option value="${i}">${data[shengs.value].children[i].name}</option> `; // 渲染市区下拉菜单函数 }shis.innerHTML = str;//把渲染内容添加到市的下拉框中//当选别的省和市时初始化qus.innerHTML = str;//把渲染内容添加到市的下拉框中//当选别的省和市时初始化 } // 渲染区县下拉菜单函数 function qu() {console.log(data[shengs.value].children)let str = "<option value=''>-请填写区县-</option>";//命名str为请填写区县for (let i = 0; i < data[shengs.value].children[shis.value].children.length; i++) {//遍历省的值，也就是找省对应的市级数据的下标 的区级数据console.log(data[shengs.value].children[shis.value].children[i].name);str += `<option value="">${data[shengs.value].children[shis.value].children[i].name}</option>`;}//拼接从省的下标的市级数据的下标的区级数据qus.innerHTML = str;//把渲染内容添加到区级下拉框中 } // 显示的内容为决定显示的字符串 //在渲染里判断是否选择省份如果没选择省份就保持原样 // 如已经选择第二个就拼接请选择市， // 如已经选择市份第三个就
html代码
<!DOCTYPE html> <html><head><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1"><title>三级</title></head><body><select class="shengs" onchange="shi()"><option value="请选择省份">-请选择省份-</option><option class="sheng" value="河南省">河南省</option></select><select class="shis" onchange="qu()"><option value="请选择省份" >-请选择省份-</option></select><select class="qus"><option value=请选择省份 >-请选择省份-</option></select></body><script src="js/index.js"></script> </html>
json数据
[{"name": "河南省","children": [{"name": "商丘市","children": [{"name": "城镇区"}, {"name": "上阵区"}]}, {"name": "上扬市","children": [{"name": "上扬区"}]}]}, {"name": "河东省","children": [{"name": "南阳市","children": [{"name": "商城区"}, {"name": "商长区"}]},{"name": "菏泽市","children": [{"name": "菏泽区"}]}]}, {"name": "江西省","children": [{"name": "南昌市","children": [{"name": "南昌区"},{"name": "九江区"}, {"name": "临川区"}]},{"name": "九江市","children": [{"name": "九上区"}]}, {"name": "临川市","children": [{"name": "临川区"}]}]},{"name": "东北省","children": [{"name": "三栋市","children": [{"name": "三一区"}]}]},{"name": "河北省","children": [{"name": "石家庄市","children": [{"name": "石家庄区"}]}]},{"name": "辽宁省","children": [{"name": "沈阳市","children": [{"name": "沈阳区"}, {"name": "皇姑区"}, {"name": "铁西区"}, {"name": "苏家屯区"}, {"name": "沈北新区"}]}, {"name": "抚顺市","children": [{"name": "和平区"}, {"name": "沈河区"}, {"name": "大东区"}]}, {"name": "大连市","children": [{"name": "于洪区"}, {"name": "辽中区"}]}]}, {"name": "黑龙江省","children": [{"name": "哈尔滨市","children": [{"name": "五常区"}, {"name": "双城区"}, {"name": "香坊区"}, {"name": "木兰县"}, {"name": "西安区"}]}, {"name": "齐齐哈尔市","children": [{"name": "齐齐哈尔区"}, {"name": "东安区"}, {"name": "向阳区"}, {"name": "尖山区"}, {"name": "新兴区"}]}, {"name": "鹤岗市","children": [{"name": "鹤岗区"}, {"name": "哈尔滨区"}, {"name": "道里区"}, {"name": "萨尔图区"}, {"name": "鸡冠区"}]}]} ]
