代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>三级联动</title> </head> <body> <!-- 省市区 --> 省<select name="" id="province"> <option value="">---请选择---</option> </select> 市<select name="" id="city"> <option value="">---请选择---</option> </select> 区/县<select name="" id="distinct"> <option value="">---请选择---</option> </select> <script> // 模拟json数据 var address = [{ "name": "陕西省", "child": [{ "name": "西安市", "child": [{ "name": "阎良区" }, { "name": "长安区" }, { "name": "雁塔区" }] }, { "name": "榆林市", "child": [{ "name": "榆阳区" }, { "name": "绥德县" }, { "name": "米脂县" }, { "name": "横山区" }] } ] }, { "name": "江苏省", "child": [{ "name": "南京市", "child": [{ "name": "南京区1" }, { "name": "南京区2" }, { "name": "南京区3" }] }, { "name": "连云港市", "child": [{ "name": "连云港市1区" }, { "name": "连云港市2区", }, { "name": "连云港市3区" }] } ] }, { "name": "广东省", "child": [{ "name": "佛山市", "child": [{ "name": "佛山1区" }, { "name": "佛山2区" }, { "name": "佛山3区" }] }, { "name": "深圳市", "child": [{ "name": "深圳1区" }, { "name": "深圳2区" }] } ] }] var province = document.getElementById("province"); var city = document.getElementById("city"); var distinct = document.getElementById("distinct"); var cityname = null; var quname=null; // console.log(address.length);//3 for (var i = 0; i < address.length; i++) { var opt = new Option(address[i].name, i); province.appendChild(opt); } province.onchange = function () { city.options.length=1; distinct.options.length=1; var index = this.value; cityname = address[index].child; for (var i = 0; i < cityname.length; i++) { var opt = new Option(cityname[i].name, i); city.appendChild(opt); } } city.onchange=function (){ distinct.options.length=1; var index=this.value; quname=cityname[index].child; for(var i=0;i<quname.length;i++){ var opt=new Option(quname[i].name,i); distinct.appendChild(opt); } } //option(text,value); //option(下一级内容，索引) </script> </body> </html> 来源：51CTO
作者：不归少年
链接：https://blog.csdn.net/Wang_jiao_yaa/article/details/100109358