这篇博客也是一个练习小项目，话不多说，直接上代码；
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> .shengf { width: 110px; } .shi { width: 110px; } .qux { width: 110px; } </style> </head> <body> <select class="shengf" onchange="fn()"> <option value="">请选择省份</option> </select> <select class="shi" onchange="fnn()"> <option value="">请先选择省份</option> </select> <select class="qux"> <option value="">请先选择省份</option> </select> <script src="index.js"></script> </body> </html>
还是老样子，先把样式搞出来，大家不要学我啊，我写的并不是很规范！
//获取HTML中的下拉框1 shengf let shengf = document.getElementsByClassName('shengf')[0]; //获取HTML中的下拉框2 shi let shi = document.getElementsByClassName('shi')[0]; //获取HTML中的下拉框3 qux let qux = document.getElementsByClassName('qux')[0]; //声明一个全局变量 ld let ld; //声明new XMLHttpRequest let doo = new XMLHttpRequest(); //使用 open 方法指定要请求的地址、类型和方式 doo.open('get','sj.json',true); //使用send方法发送请求 doo.send(); //绑定 onreadystatechange 事件 doo.onreadystatechange = function(){ if(doo.readyState == 4 && doo.status == 200){ let text = doo.responseText; console.log(text); let data = JSON.parse(text); console.log(data); ld = data; sj(); } } // 判断 readyState 和 status 的状态 // 接收数据通过 json 转换使用，是用json将数据转化为js可用的形式 //调用sj //创建渲染函数 sj function sj (){ let str = "<option>请选择省份</option>"; for(let i =0;i<ld.length;i++){ str +=`<option value="${i}">${ld[i].sheng}</option>`; } shengf.innerHTML = str; } //声明一个空字符串 str(<option value="">请选择省份</option>) //for循环所有data数据 //将json数据与HTML的省份拼接数据拼接 //用innerHTML给下拉框省份渲染 //声明一个全局变量shengval let shengval ; //给下拉框1绑定onchange点击事件 function fn(){ let strr = "<option>请选择市</option>"; shengval=document.getElementsByClassName('shengf')[0].value; //console.log(shengf) for(let i =0;i<ld[shengval].childer.length;i++){ strr +=`<option value="${i}">${ld[shengval].childer[i].shi}</option>`; } shi.innerHTML= strr; qux.innerHTML= "<option>请先选择市</option>"; } // 获取sheng的下拉框选中的值 // 声明一个字符串 strr(<option value="">请选择省份</option>) // 循环数据 ld[shengval].childer.length // 拼接 的是 ld[shengval].childer[i].shi // 渲染到市这个下拉框里边 let shival; //给下拉框2绑定onchange点击事件 function fnn(){ let strrr = "<option>请选择区</option>"; shival=document.getElementsByClassName('shi')[0].value; for(let a = 0; a<ld[shengval].childer[shival].childer.length;a++){ strrr +=`<option value="${a}">${ld[shengval].childer[shival].childer[a]}</option>`; } qux.innerHTML = strrr; } //声明一个空字符串 strrr(<option value="">请选择省份</option>) //获取shi的下拉框选中的值 //循环数剧 ld[shengval].childer.length(先找到省，在通过下标找到省里的市，以及childer里的区) //拼接 ld[shengval].childer[i].区(省、市、区) //渲染到区的下拉框里
这是js里执行的操作，这个功能呢也是非常的简单啊，不过要记住一点，这里面用到的是onchange
事件，还有一点要记住渲染事件那里是只把省份渲染进去。
