省市县三级联动 javascript 原生实现实例

最新推荐文章于 2025-09-15 10:59:11 发布

原创最新推荐文章于 2025-09-15 10:59:11 发布 · 882 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#三级联动 #省市县 #javascript #原生

实例分享专栏收录该内容

8 篇文章

订阅专栏

本文介绍了一个简单的三级联动菜单实现方案，通过HTML与JavaScript完成省、市、区的选择联动。首先定义了不同层级的数据结构，然后利用JavaScript动态生成并更新各层级的下拉选项。

效果演示：




完整代码：



    

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>三级 省市区</title>
</head>
<body>
     <select id="pro"></select>
     <select id="city"></select>
     <select id="area"></select>

     <script>
          var arr1=['安徽','河北','浙江'];//定义省的数组arr1
          var arr2=[['合肥','滁州','芜湖'],['秦皇岛','唐山','邯郸'],['杭州','丽水','金华']];
             //定义市的数组arr2

           var arr3=[[['合肥一区','合肥二区','合肥三区'],['滁州一区','滁州二区','滁州三区'],
['芜湖一区','芜湖二区','芜湖三区']],[['秦皇岛一区','秦皇岛二区','秦皇岛三区'],
['唐山一区','唐山二区','唐山三区'],['邯郸一区','邯郸二区','邯郸三区']],
[['杭州一区','杭州二区','杭州三区'],['丽水一区','丽水二区','丽水三区'],
['金华一区','金华二区','金华三区']]];//定义区的数组arr3
            var obj1=document.getElementById("pro");//获取省的select目标
            var obj2=document.getElementById("city");//获取市的select目标
            var obj3=document.getElementById("area");//获取区的select目标

//设置默认显示的省开始
             var str1="";
             for(var x=0;x<arr1.length;x++){
             str1=str1+"<option>"+arr1[x]+"</option>";
             }
             obj1.innerHTML=str1;
             //设置默认显示的省结束

//设置默认显示的市开始
             var str2="";
             for(vary=0;y<arr2[1].length;y++ ){
             str2=str2+"<option>"+arr2[0][y]+"</option>";
             }
             obj2.innerHTML=str2;
             //设置默认显示的市结束

             //设置默认显示的区开始
             var str3="";
             for(var z=0;z<arr3[1].length;z++){
             str3=str3+"<option>"+arr3[0][0][z]+"</option>";
             }
             obj3.innerHTML=str3;
             //设置默认显示的区结束

             obj1.onchange=function(){
             var inst1=this.selectedIndex;
                    varstr4="";
                    for(var m=0;m<arr2[inst1].length;m++){
                     str4=str4+"<option>"+arr2[inst1][m]+"</option>";
                    }
                    obj2.innerHTML=str4;

                     varstr5="";
                     for(var n=0;n<arr3[inst1][0].length;n++){
                     str5=str5+"<option>"+arr3[inst1][0][n]+"</option>";
                     }
                        obj3.innerHTML=str5;

                 obj2.onchange=function(){
                  var inst2=this.selectedIndex;
                     varstr6="";
                     for(var n=0;n<arr3[inst1][inst2].length;n++){
                     str6=str6+"<option>"+arr3[inst1][inst2][n]+"</option>";
                     }
                        obj3.innerHTML=str6;
             } 
             }
     </script>
</body>
</html>