html地区选择js,JavaScript实现省市区三级联动

JavaScript实现省市区三级联动

之前的文章中我们说到过如何利用JavaScript实现二级联动，这次我们来说说如何利用JavaScript实现三级联动。效果如图：

HTML代码：请选择省份：请选择省份...... 请选择城市：请选择城市...... 请选择地区：请选择地区......

JavaScript代码：// 1.创建三维数组 var provinces=[]; provinces["江苏省"]=["南京市","无锡市","苏州市"]; provinces["浙江省"]=["杭州市","宁波市"]; provinces["安徽省"]=["合肥市","马鞍山市"]; var citys=[]; citys["南京市"]=["玄武区","雨花台区","鼓楼区","秦淮区","六合区"]; citys["无锡市"]=["滨湖区","惠山区","梁溪区"]; citys["苏州市"]=["姑苏区","吴江区"]; citys["杭州市"]=["西湖区","临安区","上城区"]; citys["宁波市"]=["江北区","江东区"]; citys["合肥市"]=["蜀山区","瑶海区"]; citys["马鞍山市"]=["花山区","雨山区"]; // 2.获取元素 var oprovince = document.getElementById('province'); var ocity = document.getElementById('city'); var oarea = document.getElementById('area'); for (province in provinces) { oprovince.add(new Option(province, province))//省份下拉菜单 } oprovince.onchange = function () {//省份下拉菜单内容改变时 执行的命令 var selectvalue = oprovince.value;//获取省份下拉菜单的值 ocity.innerHTML = '请选择城市......'; oarea.innerHTML = ' 请选择市区......'; for (provincename in provinces) {//遍历省份的名称 if (provincename == selectvalue) { for (cityname in provinces[provincename]) {//遍历城市名称 ocity.add(new Option(provinces[provincename][cityname], provinces[provincename][cityname])); } } } } ocity.onchange = function () { oarea.innerHTML = ' 请选择市区......'; var cityValue = ocity.value; for (i in citys) {//i是area数组的索引值(城市名称) if (i == cityValue) { for (j in citys[i]) { oarea.add(new Option(citys[i][j], citys[i][j])); } } } } // 3.向省份菜单添加选项 for(province in provinces){ oPro.add(new Option(province,province)) } // 4.根据省份选择城市 oPro.οnchange=function(){ var sel_val=oPro.value;//获取选择的省份 oCity.innerHTML = '请选择城市......'; oArea.innerHTML = ' 请选择市区......'; for(province in provinces){ if(province == sel_val){ for(cityname in provinces[province]){ oCity.add(new Option(provinces[province][cityname],provinces[province][cityname])) } } oCity.add(new Option()) } } oCity.οnchange=function(){ var sel_val2=oCity.value;//获取选择的省份 for(city in citys){ if(province == sel_val){ for(areaname in provinces[province]){ oArea.add(new Option(provinces[province][cityname],provinces[province][cityname])) } } oCity.add(new Option()) } }

总结一下： 其实实现三级联动效果和前面实现二级联动效果基本上没太大区别，相当于是两个二级联动的“嵌套”。误区就是认为二级联动利用二维数组，三级联动就是利用三维数组。但这里其实是使用了两个二级联动进行了嵌套。

视频解析链接：

https://www.bilibili.com/video/BV1st4y1y7xs/来源：https://www.icode9.com/content-1-704851.html