<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> select{ margin-left: 10px; } </style> <script> /*Created by Administrator on 2016/3/21.*/ var seles=[ {"id":10,"name":'北京',"children":[ {"id":101,"name":'北京市',"children":[ {"id":1010,"name":'东城区'}, {"id":1011,"name":'西城区'}, {"id":1012,"name":'朝阳区'}, {"id":1013,"name":'丰台区'}, {"id":1014,"name":'石景山区'}, {"id":1015,"name":'海淀区'}, {"id":1016,"name":'门头沟区'}, {"id":1017,"name":'房山区'}, {"id":1018,"name":'通州区'}, {"id":1019,"name":'顺义区'}, {"id":1020,"name":'昌平区'}, {"id":1021,"name":'大兴区'}, {"id":1022,"name":'怀柔区'}, {"id":1023,"name":'平谷区'}, {"id":1024,"name":'密云县'}, {"id":1025,"name":'延庆县'}, {"id":1026,"name":'其他'} ]}, ]}, {"id":20,"name":'天津',"children":[ {"id":201,"name":'天津市',"children":[ {"id":2010,"name":'和平区'}, {"id":2011,"name":'河东区'}, {"id":2012,"name":'河西区'}, {"id":2013,"name":'南开区'}, {"id":2014,"name":'河北区'}, {"id":2015,"name":'红桥区'}, {"id":2016,"name":'塘沽区'}, {"id":2017,"name":'东丽区'}, {"id":2018,"name":'西青区'}, {"id":2019,"name":'津南区'}, {"id":2020,"name":'北辰区'}, {"id":2021,"name":'武清区'}, {"id":2022,"name":'宝坻区'}, {"id":2023,"name":'宁河县'}, {"id":2024,"name":'静海县'}, {"id":2025,"name":'蓟县'} ]} ]} ]; function createSelect(arr){ var sel=document.createElement("select"); sel.add(new Option("-请选择-")); for(var i=0;i<arr.length;i++){ sel.add(new Option(arr[i].name,arr[i].id)); } sel.onchange=function(){ while(this.nextSibling!=null){ this.nextSibling.parentNode.removeChild(this.nextSibling); } var i=this.selectedIndex-1; if(i!=-1){ if(arr[i].children){ createSelect(arr[i].children) } } } document.getElementById("sele").appendChild(sel) } window.onload=function(){ createSelect(seles); } </script> </head> <body> <div id="sele"></div> </body> </html>
js二级联动*本地
最新推荐文章于 2023-05-08 14:18:33 发布