通过地区编码初始化设置

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

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

$('#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']);
}
});

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

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);="" });="">

调用方法:

$(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地名
code 0 地区编码
province [无] 省份(省级),可以为地区编码或者名称
city [无] 城市(地级),可以为地区编码或者名称
area [无] 地区(县区级),可以为地区编码或者名称
required true 是否必须选中(是否自动选择地区)
nodata 'hidden' 当无数据时的表现形式:'hidden'隐藏,'disabled'禁用,为空不做任何处理
onChange [无] 地区切换时触发,回调函数传入地区信息:direct是否为直辖市,province省份(省级)名称,city城市(地级)名称,area地区(县区级)名称,code地区编码

callback(api)参数

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

适用浏览器:IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.

来源:html5实例,css3实例,jquery实例