ID #6549

基于JQuery地区三级联动列表

手头做的项目中需要用到地区库,在网上找了几个地区库,感觉不是很好,于是着手自己生 成一个地区库.地区来自中国统计局网站(数据够官方)(地址是: 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>

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

本文配套源码


2011-07-01 18:55
阅读:
I'm VC , Just U know Y
本站部分文章来源于互联网,版权归原作者所有。

延伸阅读:

一次JQuery性能优化实战

jquery中使用表单元素选择器

JQuery的扩展接口简单示例

jquery使用attr访问自定义属性,减少javascript脚本中

Jquery弹出层插件Thickbox使用心得