jquery地区选择三级联动

无意间发现以前自己写的地区选择的三级联动，虽然现在都是用插件做的，但是jquery手写的还是可以了解一下，看看就好。

首先是要引入jquery和全国地区列表文件，可以自己下载一个，我的GitHub上有 https://github.com/leileibrother/selectArea
全部代码如下：

<script src="jquery-1.11.3.js"></script>
<script src="city.js"></script>

1，html代码
<div>
<h1>三级联动</h1>
<select id="province">
<option value="省">省</option>
</select>
<select id="city">
<option value="市">市</option>
</select>
<select id="country">
<option value="县">县</option>
</select>
</div>

2，先循环出所有的省或者直辖市，添加到页面上
var allCity = city.citylist;
$.each(allCity,function(i,n){
//添加每一个省
$("#province").append('<option value="'+ n.p +'">' + n.p + '</option>');
});

3，每次选择省的时候，循环出省下面的市或区
$("#province").change(function(){
$("#country").show();
//执行后面函数之前清空一下
$("#city").html('<option value="市">市</option>');
$("#country").html('<option value="县">县</option>');
$.each(allCity,function(i,n){
if($("#province").val()==n.p){
$.each(n.c,function(a,b){
//添加每一个市
$("#city").append('<option value="'+ b.n + '">' + b.n + '</option>');
});
}
});
});

4，每次选择市区的时候，循环出市下面的县，直辖市下只有区，没有县。
$("#city").change(function(){
//执行后面函数之前清空一下
$("#country").html('<option value="县">县</option>');
$.each(allCity,function(i,n){
if($("#province").val()==n.p){
$.each(n.c,function(a,b){
if($("#city").val()==b.n){
if(b.a){//判断有没有县，有就显示，没有就隐藏
$.each(b.a,function(c,d){
//添加每一个县
$("#country").append('<option value="'+ d.s + '">' + d.s + '</option>');
})
}else{
$("#country").hide();
}
}
});
}
});
});