页面结构:
<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);
}
}
})
}