基于JQuery地区三级联动列表

核心提示：本文示例源代码或素材下载 手头做的项目中需要用到地区库,在网上找了几个地区库,感觉不是很好,于是着手自己生成一个地区库.地区来自中国统计局网站(数据够官方)(地址是: http://www.stats.gov.cn/tjbz/xzqhdm/t20080215_402462675.htm),通过文本处理,生成到数

本文示例源代码或素材下载

手头做的项目中需要用到地区库,在网上找了几个地区库,感觉不是很好,于是着手自己生成一个地区库.地区来自中国统计局网站(数据够官方)(地址是: 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[i] + "</option>";
　　　　　　}
　　　　　　$('#province').empty().append(pro);
　　　　　　getCities();
　　　　}
　　　　function getCities(){
　　　　　　var proIndex = $('#province').attr('selectedIndex');
　　　　　　showCities(proIndex);
　　　　　　getCounties();
　　　　}
　　　　function showCities(proIndex){
　　　　　　var cit = "";
　　　　　　if(cities[proIndex] == null){
　　　　　　　　$('#city').empty();
　　　　　　　　return;
　　　　　　}
　　　　　　for(var i = 0 ;i < cities[proIndex].length ; i++){
　　　　　　　　cit += "<option>" + cities[proIndex][i] + "</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[proIndex][citIndex] == null){
　　　　　　　　$('#county').empty();
　　　　　　　　return;
　　　　　　}
　　　　　　for(var i = 0 ;i < counties[proIndex][citIndex].length;i++){
　　　　　　　　cou += "<option>" + counties[proIndex][citIndex][i] + "</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>　

这样实现了一个比较好的地区联动.