无意间发现以前自己写的地区选择的三级联动,虽然现在都是用插件做的,但是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(); } } }); } }); });