jquery实现省市区地址三级联动功能

页面结构：
<div class="detail-group provinceStyle" id="detailMarketCouponAddress">
<div class="detail-div">
            <label class="control-label"><span class="red-star">*</span>使用城市</label>
        <select class="form-control" disabled readonly></select></div>
        <div class="detail-div"><select class="form-control" disabled readonly></select></div>
         <div class="detail-div"><select class="form-control" disabled readonly></select></div>
 </div>

二、

1. 点击页面初始化调用provinceClick(id,status,code)；
添加页面只传两个数据Id和状态'add'
编辑和详情传三个参数

/**
 * @description 省市区三级联动--添加修改详情页初始化时调用
 * @param id: 包裹三个选择框的最外层的id
 * @param status: 页面状态（add,edit detail）
 * @param code: 数据库中保存的code码
 * @author laibaohui
 */
function provinceClick(id,status,code){
    var first = $('#'+ id).find('div:eq(0) select');//获取select框
    var second = $('#'+ id).find('div:eq(1) select');
    var third = $('#'+ id).find('div:eq(2) select');

    var firstCode,secondCode,thirdCode;//当前被选中的code码

    $('#'+ id).find('select').val('');//清空所有select框
    if(status == 'edit'||status == 'detail'){//编辑和详情页面回显
        var province = code.substr(0,2)+'0000';  //根据后端的code，进行字符串拆分
        var city = code.substr(0,4)+'00';   //市
        var district = code.substr(0,6);   //区/县

       provinceGetDataEdit('',first,'p',province,status);//省
        provinceGetDataEdit(province,second,'c',city,status);//市
        if(code.substr(-4,4) != '0000'){//只显示省
            provinceGetDataEdit(city,third,'d',district,status);//区
        }

    }else if(status=='add'){
        first.append('<option>省</option>').attr('disabled','disabled');
        second.append('<option>市</option>').attr('disabled','disabled');
        third.append('<option>区/县</option>').attr('disabled','disabled');
        provinceGetDataAdd('',first,'p'); //ajax获取省份的数据
    }
    if(status=='detail'){
        $('#'+ id).find('select').attr('disabled','disabled');//禁用选择框
    }
    first.change(function(){
        firstCode=first.find('option:selected').attr('data-code');//获取被选中的option的属性值
        if(firstCode!=undefined){
            provinceGetDataAdd(firstCode,second,'c'); //ajax获取市的数据
        }else{
            second.empty().append('<option>市</option>').attr('disabled','disabled');
            third.empty().append('<option>区/县</option>').attr('disabled','disabled');
        }
    });
    second.change(function(){
        secondCode=second.find('option:selected').attr('data-code');//获取被选中的option的属性值
        if(secondCode!=undefined){
            provinceGetDataAdd(secondCode,third,'d'); //ajax获取区的数据
        }else{
            third.empty().append('<option>区/县</option>').attr('disabled','disabled');
        }
    });
    third.change(function(){
        thirdCode=third.find('option:selected').attr('data-code');//获取被选中的option的属性值
    });
}

/**
 * @description 省市区三级联动--编辑页拉取数据时调用
 * @param id: 当前页面包裹三个选择框的最外层的id
 * @author laibaohui
 */
function provinceGetCode(id){
    var first=$('#'+id).find('div:eq(0) select');//获取select框
    var second=$('#'+id).find('div:eq(1) select');
    var third=$('#'+id).find('div:eq(2) select');

    var firstCode=first.find('option:selected').attr('data-code');//获取被选中的code值
    var secondCode=second.find('option:selected').attr('data-code');
    var thirdCode=third.find('option:selected').attr('data-code');

    var code="";
    if(third.find('option:selected').index() != 0){//如果第3个select被选中,返回第3个的值
        code=thirdCode;
    }else{
        if(second.find('option:selected').index() != 0){//如果第2个select被选中,返回第2个的值
            code=secondCode;
        }else{
            code=firstCode;//返回第1个的值
        }
    };
    return code;
}

/**
 * @description 省市区三级联动--添加页拉取数据时调用
 * @param code: 按具体情况传省/市/区的编码值
 * @param box: 按具体情况传省/市/区的select选择框
 * @param area: 区分省/市/区
 * @author laibaohui
 */
function provinceGetDataAdd(code,box,area){
    $.ajax({
        type: 'POST',
        dataType: 'json',
        url: yy_context + '/yibasic/city/queryCityRegionListByAreaCode.do',
        data: {
            areaCode: code
        },
        success: function (data) {
            box.empty();
            var html='';
            if(area =='p'){//当省数据加载完省才可以点击，其他框禁用
                box.parent().parent().find('div:eq(0) select').empty().append('<option>省</option>').removeAttr('disabled');
                box.parent().parent().find('div:eq(1) select').empty().append('<option>市</option>').attr('disabled','disabled');
                box.parent().parent().find('div:eq(2) select').empty().append('<option>区/县</option>').attr('disabled','disabled');
            }else if(area =='c'){//当市数据加载完才可以点击，区禁用
                if(code =='100000'){
                    box.parent().parent().find('div:eq(1) select').empty().append('<option>市</option>').attr('disabled','disabled');
                }else{
                    box.parent().parent().find('div:eq(1) select').empty().append('<option>市</option>').removeAttr('disabled');
                }
                box.parent().parent().find('div:eq(2) select').empty().append('<option>区/县</option>').attr('disabled','disabled');
            }else if(area == 'd'){//当区数据加载完才可以点击
                box.parent().parent().find('div:eq(2) select').empty().append('<option>区/县</option>').removeAttr('disabled');
            }
            for (var i=0; i<data.length; i++) {//循环插入数据库里的数据
                for (var key in data[i]) {
                    html += '<option data-code=' + key + '>' + data[i][key] + '</option>';
                }
            }
            box.append(html);
        }
    })
}

function provinceGetDataEdit(code,box,area,areaCode,status){
    $.ajax({
        type: 'POST',
        dataType: 'json',
        url: yy_context + '/yibasic/city/queryCityRegionListByAreaCode.do',
        data: {
            areaCode: code
        },
        success: function (data) {
            box.empty();
            var html='';
            if(area == 'p'){//编辑页面选择框里动态插入省/市/区
                html+='<option>省</option>';
            }else if (area == 'c'){
                box.parent().parent().find('div:eq(1) select').empty().append('<option>市</option>');
                if(status == 'edit'){
                    box.parent().parent().find('div:eq(1) select').removeAttr('disabled');
                }
            }else if(area == 'd'){
                box.parent().parent().find('div:eq(2) select').empty().append('<option>区/县</option>');
                if(status == 'edit'){
                    box.parent().parent().find('div:eq(2) select').removeAttr('disabled');
                }
            }
            for (var i=0; i<data.length; i++) {//循环插入数据
                for (var key in data[i]) {
                    html += '<option data-code=' + key + '>' + data[i][key] + '</option>';
                }
            }
            box.append(html);//将数据插入到页面
            var value = box.find('option[data-code="' + areaCode + '"]').text();//根据code码，显示相对应的地址
            if(code =='100000'){//如果全国其他框禁用
                box.parent().parent().find('div:eq(1) select').empty().append('<option>市</option>').attr('disabled','disabled');
            }
            if(value == ''){//如果地址为空则显示默认文字
                if(area == 'c'){
                    box.val('市');
                    box.parent().parent().find('div:eq(2) select').empty().append('<option>区/县</option>').attr('disabled','disabled');
                }else if(area == 'd'){
                    box.val('区/县');
                }
            }else{
                box.val(value);
            }
        }
    })
}