基于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[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>

 

这样实现了一个比较好的地区联动.
    欢迎大家讨论.
    地区Js文件下载:

评论

6 楼 jackylt_lu 2013-07-02  

感谢分享！需要地区数据库DEMO！[e-mail]

5 楼 稻草人tcm 2013-01-11  

需要一份地区数据库，麻烦传给我一份，非常感谢！[e-mail]

4 楼 Java-feifeiok 2011-10-20  

[e-mail]谢谢 给我来一份地区库！

3 楼 lengjunjian 2010-06-02  

不知道为什么在topStyle里面不能用，不过放到WEB项目里就能跑了，不过速度还不错，比起ajax来说优化不少。比起城市数据由DBA来维护，这种方式更易于普通维护员来操作。

2 楼 zhzhwwqq 2009-11-30  

谢谢哥们的分享，很有用哦

1 楼 shang_yj0927 2008-12-15  

需要通过文本处理,生成到数据库，我的邮箱[e-mail]
谢谢