您现在的位置：

北京市天津市河北省山西省内蒙古自治区辽宁省吉林省黑龙江省上海市江苏省浙江省安徽省福建省江西省山东省河南省湖北省湖南省广东省广西壮族自治区海南省重庆市四川省贵州省云南省西藏自治区陕西省甘肃省青海省宁夏回族自治区新疆维吾尔自治区台湾省香港特别行政区澳门特别行政区杭州市宁波市温州市嘉兴市湖州市绍兴市金华市衢州市舟山市台州市丽水市越城区柯桥区上虞区新昌县诸暨市嵊州市

根据IP地址定位：IP接口文档

北京市天津市河北省山西省内蒙古自治区辽宁省吉林省黑龙江省上海市江苏省浙江省安徽省福建省江西省山东省河南省湖北省湖南省广东省广西壮族自治区海南省重庆市四川省贵州省云南省西藏自治区陕西省甘肃省青海省宁夏回族自治区新疆维吾尔自治区台湾省香港特别行政区澳门特别行政区福州市厦门市莆田市三明市泉州市漳州市南平市龙岩市宁德市思明区海沧区湖里区集美区同安区翔安区

通过地区编码初始化设置

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

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

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

- 请选择 - 北京市天津市河北省山西省内蒙古自治区辽宁省吉林省黑龙江省上海市江苏省浙江省安徽省福建省江西省山东省河南省湖北省湖南省广东省广西壮族自治区海南省重庆市四川省贵州省云南省西藏自治区陕西省甘肃省青海省宁夏回族自治区新疆维吾尔自治区台湾省香港特别行政区澳门特别行政区 - 请选择 -

请选择地区

扫描二维码关注公众号，回复： 115005 查看本文章

事件处理

$('#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	[数据库地址]	最新数据库（2017年5月）：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地区编码

城市三级联动js

调用方法：

options参数

callback(api)参数

猜你喜欢