闲来没事，写点jquery练练手。
<!--json代码部分 新建文件liandong.json-->
var pron_city = {
'省':['all'],
'北京':[
{'市':[]},
{'海淀区':[]},
{'东城区':[]},
{'西城区':[]},
{'昌平区':[]},
{'怀柔区':[]},
{'朝阳区':[]}
],
'山东':[
{'市':[]},
{'济南':['区','历城区','历下区','槐荫区','市中区']},
{'青岛':['区','一区','二区']}
],
'河北':[
{'市':[]},
{'石家庄':['区','三区','四区']},
{'唐山':['区','五区','六区']},
{'保定':['区','七区','八区']}
]
}
<!--html代码部分-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style> </style>
</head>
<script src="../js/jquery.js"></script>
<style>
body{background-color:#435a9d;}
ul,li{margin:0;padding:0;}
.abc{
width:420px;
height:480px;
margin:100px;
}
select{
width:110px;
margin-left:10px;
}
</style>
<script src="liandong.json"></script>
<script>
$(document).ready(function(){
for(var i in pron_city){
var html_pn = "<option>"+i+"</option>";
$('.province').append(html_pn);
}
var province , city , index;
$('.province').change(function(){
$('.city,.block').empty();
province = $(this).val();
for(var j in pron_city[province]){
for(var m in pron_city[province][j])
{
var html_cy = "<option>"+m+"</option>";
$('.city').append(html_cy);
}
}
})
$('.city').change(function(){
$('.block').empty();
city = $(this).val();
index = $(this)[0].selectedIndex;
for(var k in pron_city[province][index][city]){
html_bk = "<option>"+pron_city[province][index][city][k]+"</option>";
$('.block').append(html_bk);
}
}) })
</script>
<body>
<div class="abc">
<select class="province">
</select>
<select class="city">
<option selected>市</option>
</select>
<select class="block">
<option selected>区</option>
</select>
</div>
</body>
</html>