省市县乡四级联动java代码,jQuery省市区街道四级联动代码

特效描述：jQuery 省市区街道 四级联动代码。jQuery省市区街道四级联动代码

代码结构

1. 引入CSS

2. 引入JS

3. HTML代码

通过地区编码初始化设置

$('#demo').citys({code:350206});

$('#demo').citys({code:350206});

通过地区名称初始化设置，并且下拉框值为地区名称

$('#demo1').citys({valueType:'name',province:'福建',city:'厦门',area:'思明'});

$('#demo1').citys({valueType:'name',province:'福建',city:'厦门',area:'思明'});

请选择地区

事件处理

$('#demo2').citys({

required:false,

nodata:'disabled',

onChange:function(data){

var text = data['direct']?'(直辖市)':'';

$('#place').text('当前选中地区：'+data['province']+text+' '+data['city']+' '+data['area']);

}

});

$('#demo2').citys({

required:false,

nodata:'disabled',

onChange:function(data){

var text = data['direct']?'(直辖市)':'';

$('#place').text('当前选中地区：'+data['province']+text+' '+data['city']+' '+data['area']);

}

});

扩展显示行政区划第四级(街道)信息：

var $town = $('#demo3 select[name="town"]');

var townFormat = function(info){

$town.hide().empty();

if(info['code']%1e4&&info['code']<7e6){//是否为“区”且不是港澳台地区

$.ajax({

url:'http://passer-by.com/data_location/town/'+info['code']+'.json',

dataType:'json',

success:function(town){

$town.show();

for(i in town){

$town.append('<option value="'+i+'">'+town[i]+'</option>');

}

}

});

}

};

$('#demo3').citys({

province:'福建',

city:'厦门',

area:'思明',

onChange:function(info){

townFormat(info);

}

},function(api){

var info = api.getInfo();

townFormat(info);

});

var $town = $('#demo3 select[name="town"]');

var townFormat = function(info){

$town.hide().empty();

if(info['code']%1e4&&info['code']<7e5){//是否为“区”且不是港澳台地区

$.ajax({

url:'http://passer-by.com/data_location/town/'+info['code']+'.json',

dataType:'json',

success:function(town){

$town.show();

for(i in town){

$town.append(''+town[i]+'');

}

}

});

}

};

$('#demo3').citys({

province:'福建',

city:'厦门',

area:'思明',

onChange:function(info){

townFormat(info);

}

},function(api){

var info = api.getInfo();

townFormat(info);

});

调用方法：

$(selector).citys(options,callback);

options参数

参数默认值说明

dataUrl[数据库地址]

最新数据库()：JSON格式JSONP格式

数据库项目：中国行政区划(省、市、区、街道)

dataType'json'

数据库类型:'json'或'jsonp'

IE9-由于默认安全设置，需开启“通过域访问数据源”才能跨域访问json，此类情况建议使用jsonp格式

provinceField'province'省份(省级)字段名cityField'city'城市(地级)字段名areaField'area'地区(县区级)字段名valueType'code'下拉框值的类型,code行政区划代码,name地名code0地区编码province[无]省份(省级),可以为地区编码或者名称city[无]城市(地级),可以为地区编码或者名称area[无]地区(县区级),可以为地区编码或者名称requiredtrue是否必须选中(是否自动选择地区)nodata'hidden'当无数据时的表现形式:'hidden'隐藏,'disabled'禁用,为空不做任何处理onChange[无]地区切换时触发,回调函数传入地区信息:direct是否为直辖市,province省份(省级)名称,city城市(地级)名称,area地区(县区级)名称,code地区编码

callback(api)参数

方法说明

getInfo(data)获取当前选中的地区信息:direct是否为直辖市,province省份(省级)名称,city城市(地级)名称,area地区(县区级)名称,code地区编码