省市区三级联动

来源：互联网发布：php培训课程编辑：程序博客网时间：2024/06/06 16:37
省市区的三级关联菜单

<!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>
阅读全文
0 0