java 四级联动_四级联动

纯JS省市区联动

/**

* jquery.citys.js 1.0

* http://jquerywidget.com

*/

;(function (factory) {

if (typeof define === "function" && (define.amd || define.cmd) && !jQuery) {

// AMD或CMD

define([ "jquery" ],factory);

} else if (typeof module === 'object' && module.exports) {

// Node/CommonJS

module.exports = function( root, jQuery ) {

if ( jQuery === undefined ) {

if ( typeof window !== 'undefined' ) {

jQuery = require('jquery');

} else {

jQuery = require('jquery')(root);

}

}

factory(jQuery);

return jQuery;

};

} else {

//Browser globals

factory(jQuery);

}

}(function ($) {

$.support.cors = true;

$.fn.citys = function(parameter,getApi) {

if(typeof parameter == 'function'){ //重载

getApi = parameter;

parameter = {};

}else{

parameter = parameter || {};

getApi = getApi||function(){};

}

var defaults = {

dataUrl:'http://passer-by.com/data_location/list.json', //数据库地址

crossDomain: true, //是否开启跨域

dataType:'json', //数据库类型:'json'或'jsonp'

provinceField:'province', //省份字段名

cityField:'city', //城市字段名

areaField:'area', //地区字段名

valueType:'code', //下拉框值的类型,code行政区划代码,name地名

code:0, //地区编码

province:0, //省份,可以为地区编码或者名称

city:0, //城市,可以为地区编码或者名称

area:0, //地区,可以为地区编码或者名称

required: true, //是否必须选一个

nodata: 'hidden', //当无数据时的表现形式:'hidden'隐藏,'disabled'禁用,为空不做任何处理

onChange:function(){} //地区切换时触发,回调函数传入地区数据

};

var options = $.extend({}, defaults, parameter);

return this.each(function() {

//对象定义

var _api = {};

var $this = $(this);

var $province = $this.find('select[name="'+options.provinceField+'"]'),

$city = $this.find('select[name="'+options.cityField+'"]'),

$area = $this.find('select[name="'+options.areaField+'"]');

$.ajax({

url:options.dataUrl,

type:'GET',

crossDomain: options.crossDomain,

dataType:options.dataType,

jsonpCallback:'jsonp_location',

success:function(data){

var province,city,area,hasCity;

if(options.code){ //如果设置地区编码，则忽略单独设置的信息

var c = options.code - options.code%1e4;

if(data[c]){

options.province = c;

}

c = options.code - (options.code%1e4 ? options.code%1e2 : options.code);

if(data[c]){

options.city = c;

}

c = options.code%1e2 ? options.code : 0;

if(data[c]){

options.area = c;

}

}

var updateData = function(){

province = {},city={},area={};

hasCity = false; //判断是非有地级城市

for(var code in data){

if(!(code%1e4)){ //获取所有的省级行政单位

province[code]=data[code];

if(options.required&&!options.province){

if(options.city&&!(options.city%1e4)){ //省未填，并判断为直辖市

options.province = options.city;

}else{

options.province = code;

}

}else if(isNaN(options.province)&&data[code].indexOf(options.province)>-1){

options.province = code;

}

}else{

var p = code - options.province;

if(options.province&&p>0&&p<1e4){ //同省的城市或地区

if(!(code%100)){

hasCity = true;

city[code]=data[code];

if(options.required&&!options.city){

options.city = code;

}else if(isNaN(options.city)&&data[code].indexOf(options.city)>-1){

options.city = code;

}

}else if(p>8000){ //省直辖县级行政单位

city[code] = data[code];

if(options.required&&!options.city){

options.city = code;

}else if(isNaN(options.city)&&data[code].indexOf(options.city)>-1){

options.city = code;

}

}else if(hasCity){ //非直辖市

var c = code-options.city;

if(options.city&&c>0&&c<100){ //同个城市的地区

area[code]=data[code];

if(options.required&&!options.area){

options.area = code;

}else if(isNaN(options.area)&&data[code].indexOf(options.area)>-1){

options.area = code;

}

}

}else{

area[code] = data[code]; //直辖市

if(options.required&&!options.area){

options.area = code;

}else if(isNaN(options.area)&&data[code].indexOf(options.area)>-1){

options.area = code;

}

}

}

}

}

};

var format = {

province:function(){

$province.empty();

if(!options.required){

$province.append(' - 请选择 - ');

}

for(var i in province){

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

}

if(options.province){

var value = options.valueType=='code'?options.province:province[options.province];

$province.val(value);

}

this.city();

},

city:function(){

$city.empty();

if(!hasCity){

$city.css('display','none');

}else{

$city.css('display','');

if(!options.required){

$city.append(' - 请选择 - ');

}

if(options.nodata=='disabled'){

$city.prop('disabled',$.isEmptyObject(city));

}else if(options.nodata=='hidden'){

$city.css('display',$.isEmptyObject(city)?'none':'');

}

for(var i in city){

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

}

if(options.city){

var value = options.valueType=='code'?options.city:city[options.city];

$city.val(value);

}else if(options.area){

var value = options.valueType=='code'?options.area:city[options.area];

$city.val(value);

}

}

this.area();

},

area:function(){

$area.empty();

if(!options.required){

$area.append(' - 请选择 - ');

}

if(options.nodata=='disabled'){

$area.prop('disabled',$.isEmptyObject(area));

}else if(options.nodata=='hidden'){

$area.css('display',$.isEmptyObject(area)?'none':'');

}

for(var i in area){

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

}

if(options.area){

var value = options.valueType=='code'?options.area:area[options.area];

$area.val(value);

}

}

};

//获取当前地理信息

_api.getInfo = function(){

var status = {

direct:!hasCity,

province:data[options.province]||'',

city:data[options.city]||'',

area:data[options.area]||'',

code:options.area||options.city||options.province

};

return status;

};

//事件绑定

$province.on('change',function(){

options.province = $(this).find('option:selected').data('code')||0; //选中节点的区划代码

options.city = 0;

options.area = 0;

updateData();

format.city();

options.onChange(_api.getInfo());

});

$city.on('change',function(){

options.city = $(this).find('option:selected').data('code')||0; //选中节点的区划代码

options.area = 0;

updateData();

format.area();

options.onChange(_api.getInfo());

});

$area.on('change',function(){

options.area = $(this).find('option:selected').data('code')||0; //选中节点的区划代码

options.onChange(_api.getInfo());

});

//初始化

updateData();

format.province();

if(options.code){

options.onChange(_api.getInfo());

}

getApi(_api);

}

});

});

};

}));

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);

});