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

最新推荐文章于 2024-07-19 15:34:53 发布

cvper

最新推荐文章于 2024-07-19 15:34:53 发布

阅读量779

点赞数

分类专栏：实例分享文章标签：三级联动省市县 javascript 原生

本文链接：https://blog.csdn.net/cvper/article/details/79175320

版权

实例分享专栏收录该内容

8 篇文章 0 订阅

订阅专栏

 
  效果演示 
  ： 
 
 
  
  
 
 
  
  
 
 
  完整代码：
  
 
 
  
  
 
 
      
  
 
 
  <!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.οnchange=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.οnchange=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> 
  
 
  
 
  
 
 

cvper

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
省市县三级联动 javascript 原生实现实例

效果演示：完整代码：三级省市区 var arr1=['安徽','河北','浙江'];//定义省的数组arr1 var arr2=[['合肥','滁州','芜湖'],['秦皇岛','唐山','邯郸'],['杭州','丽水','金华']];
复制链接

扫一扫

专栏目录