JS省市区联动效果

省市区联动下拉效果在WEB中应用非常广泛，尤其在电商网站最为常见。一般使用Ajax实现无刷新下拉联动。利用jQuery，通过读取JSON数据，实现无刷新动态下拉省市二（三）级联动效果。

首先我们可以看看自定义参数配置项如下：

参数配置如下：

url	'js/city.min.js',   省市区JSON数据
provId	'#prov',     　　　　默认省份ID
cityId	'#city'                   默认城市ID
areaId	'#area'                默认区ID
prov	null ,                        参数是否传入默认的省份
city	null,                        参数是否传入默认的市
area	null ,                        参数是否传入默认的区
required	true,                        必填项 默认为true

接下来HTML代码如下：

<div id="city_4">
      <select class="prov" id="prov4"></select>
        <select class="city" disabled="disabled" id="city4"></select>
        <select class="dist" disabled="disabled" id="area4"></select>
</div>

如果没有三级联动的话 那么区的HTML代码可以省略掉！

调用非常简单如下：

new CitySelect({
    provId : "#prov4",
    cityId : '#city4',
    areaId : '#area4',
    prov:"湖南",
        city:"长沙"
});

废话也不多说，贴代码如下：

HTML代码：

<div id="main">
  <div class="demo">
      <h3>直接调用</h3>
    <p>二级联动，默认选项为：请选择</p>
      <div id="city_1">
          <select class="prov" id="prov1"></select>
        <select class="city" disabled="disabled" id="city1"></select>
    </div>
    <p>三级联动，默认省份：北京，隐藏无数据的子级select</p>
    <div id="city_2">
          <select class="prov" id="prov2"></select>
        <select class="city" disabled="disabled" id="city2"></select>
        <select class="dist" disabled="disabled" id="area2"></select>
    </div>
  </div>

  <div class="demo">
      <h3>设置省份、城市、地区（县）的默认值</h3>
    <p>二级联动</p>
      <div id="city_3">
          <select class="prov" id="prov3"></select>
        <select class="city" disabled="disabled" id="city3"></select>
    </div>
    <p>三级联动</p>
    <div id="city_4">
          <select class="prov" id="prov4"></select>
        <select class="city" disabled="disabled" id="city4"></select>
        <select class="dist" disabled="disabled" id="area4"></select>
    </div>
  </div>

  <div class="demo">
      <h3>自定义下拉选项</h3>
      <div id="city_5">
          <select class="prov" id="prov5"></select>
        <select class="city" disabled="disabled" id="city5"></select>
        <select class="dist" disabled="disabled" id="area5"></select>
    </div>
  </div>
</div>

JS代码如下：

/**
 * JS省市区联动
 * @constructor CitySelect
 * @author tugenhua
 * @time 2014-2-22
 * @email 879083421@qq.com
 */

 function CitySelect(options) {

    this.config = {
        url       :   "js/city.min.js",
        provId    :   '#prov',
        cityId    :   '#city',
        areaId    :   '#area',
        prov      :   null,
        city      :   null,
        area      :   null,
        required  :   true
    };

    this.cache = {
        select_prehtml  : '',          // 下拉框默认选项
        city_json       : ''           //  城市json
    };

    this.init(options);
 }

 CitySelect.prototype = {

    constructor : CitySelect,

    init: function(options) {
        this.config = $.extend(this.config, options || {});
        var self = this,
            _config = self.config,
            _cache = self.cache;

        _cache.select_prehtml = _config.required ? '' : "<option value=''>请选择</option>";

        // 设置省市的数据
        if(typeof(_config.url) == 'string') {
            $.getJSON(_config.url, function(json) {
                _cache.city_json = json;
                self._provFunc();
            });
        }else {
            _cache.city_json = _config.url;
            self._provFunc();
        }
    },
    /*
     * 渲染省份函数
     * @method _provFunc
     */
    _provFunc: function() {
        var self = this,
            _config = self.config,
            _cache = self.cache;

        var html = _cache.select_prehtml;

        // 遍历 获取省份
        $(_cache.city_json.citylist).each(function(i,prov){
            html += "<option value='"+prov.p+"'>"+prov.p+"</option>";
        });
        $(_config.provId).html(html);

        /*
         * 若有传入省份与市级的值，则选中。（setTimeout为兼容IE6而设置）
         * 发现取到的selectedIndex老是前面一次
         */
        t && clearTimeout(t);
        var t = setTimeout(function(){
            if(_config.prov != null) {
                $(_config.provId).val(_config.prov);
                self._cityStart();
                setTimeout(function(){
                    if(_config.city != null) {
                        $(_config.cityId).val(_config.city);
                        self._areaStart();
                        setTimeout(function(){
                            if(_config.area != null) {
                                $(_config.areaId).val(_config.area);
                            }
                        },1);
                    }
                },1);
            }
        },1);

        // 选择省份时发生事件
        $(_config.provId).unbind('change').bind('change',function(){
            self._cityStart();
        });
        // 选择市级时发生事件
        $(_config.cityId).unbind('change').bind('change',function(){
            self._areaStart();
        });
    },
    /*
     * 渲染市函数
     * @method _cityStart
     */
    _cityStart: function() {
        var self = this,
            _config = self.config,
            _cache = self.cache;
        var prov_id = $(_config.provId).get(0).selectedIndex;
        if(!_config.required){
            prov_id--;
        };
        $(_config.cityId).empty().attr("disabled",true);
        $(_config.areaId).empty().attr("disabled",true);

        if(prov_id < 0 || typeof(_cache.city_json.citylist[prov_id].c)=="undefined"){

            return;
        }

        var html = _cache.select_prehtml;

        $.each(_cache.city_json.citylist[prov_id].c,function(i,city){
            html += "<option value='"+city.n+"'>"+city.n+"</option>";
        });

        $(_config.cityId).html(html).attr('disabled',false);

        self._areaStart();
    },
    /*
     * 渲染区函数
     * @method _areaStart
     */
    _areaStart: function(){
        var self = this,
            _config = self.config,
            _cache = self.cache;
        var prov_id=$(_config.provId).get(0).selectedIndex,
            city_id=$(_config.cityId).get(0).selectedIndex;
        if(!_config.required){
            prov_id--;
            city_id--;
        };
        $(_config.areaId).empty().attr("disabled",true);

        if(prov_id<0||city_id<0||typeof(_cache.city_json.citylist[prov_id].c[city_id].a)=="undefined"){
            return;
        };
        var html = _cache.select_prehtml;

        $.each(_cache.city_json.citylist[prov_id].c[city_id].a,function(i,area){
            html += "<option value='"+area.s+"'>"+area.s+"</option>";
        });

        $(_config.areaId).html(html).attr('disabled',false);

    }
 };

调用如下：

$(function(){
    new CitySelect({
        prov:'北京',
        provId : "#prov1",
        cityId : '#city1'
    });

    new CitySelect({
        provId : "#prov2",
        cityId : '#city2',
        areaId : '#area2'
    });
    new CitySelect({
        provId : "#prov3",
        cityId : '#city3'
    });
    new CitySelect({
        provId : "#prov4",
        cityId : '#city4',
        areaId : '#area4',
        prov:"湖南",
        city:"长沙"
    });
    new CitySelect({
        provId : "#prov5",
        cityId : '#city5',
        areaId : '#area5'
    });
});

DEMO下载