<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{margin:0px;padding:0px;}
#box{height:30px;100%;margin:20px auto;text-align: center;}
#box select{border:1px solid #CCC;margin:0px 5px;}
</style>
<script type="text/javascript">
var data = {
"0":[
{"cityid":"1","cityname":"北京","pid":"0"},
{"cityid":"15","cityname":"上海","pid":"0"},
{"cityid":"16","cityname":"重庆","pid":"0"},
{"cityid":"70","cityname":"四川省","pid":"0"}
],
"1":[
{"cityid":"2","cityname":"朝阳区","pid":"1"},
{"cityid":"10","cityname":"丰台区","pid":"1"},
{"cityid":"18","cityname":"海淀区","pid":"1"},
{"cityid":"20","cityname":"东城区","pid":"1"},
{"cityid":"21","cityname":"石景山区","pid":"1"},
{"cityid":"22","cityname":"通州区","pid":"1"},
{"cityid":"23","cityname":"大兴区","pid":"1"},
{"cityid":"24","cityname":"昌平区","pid":"1"}
],
"2":[
{"cityid":"3","cityname":"大望路","pid":"2"},
{"cityid":"4","cityname":"三里屯 ","pid":"2"},
{"cityid":"5","cityname":"国贸 ","pid":"2"}],
"10":[
{"cityid":"11","cityname":"青塔","pid":"10"},
{"cityid":"12","cityname":"北大地","pid":"10"}
],
"18":[
{"cityid":"35","cityname":"双榆树","pid":"18"}
],
"35":[
{"cityid":"60","cityname":"双安商场 ","pid":"35"}
],
"15":[
{"cityid":"65","cityname":"黄浦区","pid":"15"},
{"cityid":"66","cityname":"卢湾区","pid":"15"},
{"cityid":"67","cityname":"徐汇区 ","pid":"15"}
],
"16":[
{"cityid":"68","cityname":"渝中区","pid":"16"},
{"cityid":"69","cityname":"大渡口区","pid":"16"}
],
"70":[
{"cityid":"72","cityname":"成都市","pid":"70"},
{"cityid":"73","cityname":"高新区","pid":"70"},
{"cityid":"74","cityname":"武侯区 ","pid":"70"}
]
}
window.onload=function(){
var oBox=document.getElementById('box');
creatSelect(0);
function creatSelect(pid){
if(data[pid]==undefined) return;
var oSelect=document.createElement('select');
oBox.appendChild(oSelect);
for(var i=0;i<data[pid].length;i++){
var oOption=document.createElement('option');
oOption.innerHTML=data[pid][i].cityname;
oOption.value=data[pid][i].cityid;
oSelect.appendChild(oOption);
if(i==0){
creatSelect(data[pid][i].cityid);
}
}
}
var aSelect=document.getElementsByTagName('select');
for(var i=0;i<aSelect.length;i++){
aSelect[i].index=i;
aSelect[i].onchange=function(){
var pid=this.value;
var len=aSelect.length;
for(var j=this.index+1;j<len;j++){
oBox.removeChild(aSelect[this.index+1])
}
creatSelect(pid);
}
}
}
</script>
</head>
<body>
<div id="box"></div>
</body>
</html>