省市区三级联动

最新推荐文章于 2024-07-21 02:56:05 发布

胡鹤婷

最新推荐文章于 2024-07-21 02:56:05 发布

阅读量304

点赞数

分类专栏： html js

本文链接：https://blog.csdn.net/hhthwx/article/details/78039401

版权

js 同时被 2 个专栏收录

50 篇文章 0 订阅

订阅专栏

html

4 篇文章 0 订阅

订阅专栏

省市区的三级关联菜单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>省市三级联动</title>
    <script type="text/javascript">
         var arr = [
               {
                   "name":"安徽",
                   "city":[
                     {"name":"合肥","area":["庐阳区","瑶海区","蜀山区","包河区","长丰区"]},
                     {"name":"芜湖","area":["镜湖区","葛江区","三山区","芜湖区"]},
                     {"name":"马鞍山","area":["雨山区","花山区","金家庄区","当涂县"]}
                   ]        
               },
               {
                   "name":"江西",
                   "city":[
                       {"name":"南昌","area":["东湖区","西湖区","镜湖区"]},
                       {"name":"景德镇","area":["珠山区","昌江区","乐平市","浮梁县"]},
                       {"name":"吉安","area":["吉州区","青园区","井岗山区"]}
                   ]

            } 
         ]
         console.log(arr[0].city[1].area[1]);

         window.onload = function(){
             var box = document.getElementById("box");
             var sheng  = document.createElement("select");
             var shi  = document.createElement("select");
             var qu  = document.createElement("select");//创建了三个选项
             box.appendChild(sheng);
             box.appendChild(shi);
             box.appendChild(qu);//把创建的文档碎片加入到容器中去
             sheng.options[0] = new Option("请选择省","-1");
             shi.options[0] = new Option("请选择市","-1");
             qu.options[0] = new Option("请选择区","-1"); //将省市区各选项栏初始化
             //动态添加省市区元素
             for(var i = 0;i<arr.length;i++){
                //此时省的select已经有一个option
                sheng.options[sheng.length] = new Option(arr[i].name,i);//此时已经把省的名称添加进去
                //当单击省这一栏时，需要清除之前对应选择添加进去的选项
                sheng.onchange = function(){
                    shi.length = 0;
                    shi.options[0] = new Option("请选择市","0");
                    qu.length = 0;
                    qu.options[0] = new Option("请选择区","0");
                    for(var j = 0;j<arr[sheng.selectedIndex-1].city.length;j++){
                        shi.options[shi.length] = new Option(arr[sheng.selectedIndex-1].city[j].name,j);//把对应选择的省的市动态添加到选项中,selectedIndex减去1的原因是选项中加入了"选择市"这一个选项，所以获取到的市的索引值比自己需要的大1
                        shi.onchange = function(){
                            qu.length = 0;
                            qu.options[0] = new Option("请选择区","0");
                            // console.log(arr[sheng.selectedIndex-1].city[qu.selectedIndex-1].area[1]);
                            for(var k = 0;k<arr[sheng.selectedIndex-1].city[shi.selectedIndex-1].area.length;k++){
                                 qu.options[qu.length] = new Option(arr[sheng.selectedIndex-1].city[shi.selectedIndex-1].area[k],k);
                            }

                        }
                    }

                }
             } 

         }






    </script>
</head>
<body>
    <div id="box"></div>
</body>
</html>