基于Web Components的组件:行政区划选择器
您现在的位置:
根据IP地址定位:IP接口文档
通过地区编码初始化设置
$('#demo').citys({code:350206});
通过地区名称初始化设置,并且下拉框值为地区名称
$('#demo1').citys({valueType:'name',province:'福建',city:'厦门',district:'思明'});
请选择地区
事件处理
$('#demo2').citys({
required:false,
nodata:'disabled',
onChange:function(data){
var text = data['direct']?'(直辖市)':'';
$('#place').text('当前选中地区:'+data['province']+text+' '+data['city']+' '+data['district']);
}
});
扩展显示行政区划第四级(街道)信息:
var $town = $('#demo3 select[name="town"]');
var townFormat = function(info){
$town.hide().empty();
if(info['code']%1e4&&info['code']<7e6){ //是否为"区"且不是港澳台地区 $.ajax({ url:'https://passer-by.com/data_location/code/'+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:'厦门', district:'思明', onChange:function(info){ townFormat(info); } },function(api){ var info = api.getInfo(); townFormat(info); });$(selector).citys(options,callback);
| 参数 | 默认值 | 说明 |
|---|---|---|
| dataUrl | [数据库地址] |
数据库项目:中国行政区划(省、市、区、街道) |
| dataType | 'json' |
数据库类型:'json'或'jsonp' IE9-由于默认安全设置,需开启"通过域访问数据源"才能跨域访问json,此类情况建议使用jsonp格式 |
| crossDomain | true |
是否开启跨域 IE9-如果设置开启跨域而实际未跨域,造成请求异常 |
| provinceField | 'province' | 省份(省级)字段名 |
| cityField | 'city' | 城市(地级)字段名 |
| districtField | 'district' | 地区(县区级)字段名 |
| valueType | 'code' | 下拉框值的类型,code行政区划代码,name地名 |
| code | 0 | 地区编码 |
| province | [无] | 省份(省级),可以为地区编码或者名称 |
| city | [无] | 城市(地级),可以为地区编码或者名称 |
| district | [无] | 地区(县区级),可以为地区编码或者名称 |
| required | true | 是否必须选中(是否自动选择地区) |
| nodata | 'hidden' | 当无数据时的表现形式:'hidden'隐藏,'disabled'禁用,为空不做任何处理 |
| placeholder | ' - 请选择 - ' | 非必要选择是,默认空值的文本内容 |
| onChange(info) | [无] | 地区切换时触发,回调函数传入地区信息:direct是否为直辖市,province省份(省级)名称,city城市(地级)名称,district地区(县区级)名称,code地区编码 |
| 方法 | 说明 |
|---|---|
| getInfo(data) | 获取当前选中的地区信息:direct是否为直辖市,province省份(省级)名称,city城市(地级)名称,district地区(县区级)名称,code地区编码 |
| setCode(code) | 通过code设置地区 |