基于JQuery地区三级联动列表
本文章系Jarvis原创 转载请注明!手头做的项目中需要用到地区库,在网上找了几个地区库,感觉不是很好,于是着手自己生成一个地区库.地区来自中国统计局网站(数据够官方)(地址是: http://www.stats.gov.cn/tjbz/xzqhdm/t20080215_402462675.htm),通过文本处理,生成到数据库(需要该地区数据库的朋友可留下邮箱地址,我发给你),做可处理操作.
这次用到的联动是生成了一个地区的js文件,原来是采用AJAX实现联动的,后来感觉生成JS文件并不大,所以采用js方式.
下面是js处理代码(基于JQuery):
<script type="text/javascript"> $(document).ready(function(){ getProvinces(); }); function getProvinces(){ var pro = ""; for(var i = 0 ; i < provinces.length; i++){ pro += "<option>" + provinces + "</option>"; } $('#province').empty().append(pro); getCities(); } function getCities(){ var proIndex = $('#province').attr('selectedIndex'); showCities(proIndex); getCounties(); } function showCities(proIndex){ var cit = ""; if(cities == null){ $('#city').empty(); return; } for(var i = 0 ;i < cities.length ; i++){ cit += "<option>" + cities + "</option>"; } $('#city').empty().append(cit); } function getCounties(){ var proIndex = $('#province').attr('selectedIndex'); var citIndex = $('#city').attr('selectedIndex'); showCounties(proIndex,citIndex); } function showCounties(proIndex,citIndex){ var cou = ""; if(counties == null){ $('#county').empty(); return; } for(var i = 0 ;i < counties.length;i++){ cou += "<option>" + counties + "</option>"; } $('#county').empty().append(cou); } </script>
<select id="province" onchange="getCities()"></select> <select id="city" onchange="getCounties()" style="width:120px;"></select> <select id="county" style="width:120px;"></select>
这样实现了一个比较好的地区联动.
欢迎大家讨论.
地区Js文件下载:
页:
[1]