jquery.citys.js 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220
  1. /**
  2. * jquery.citys.js 1.0
  3. * http://jquerywidget.com
  4. */
  5. ;(function (factory) {
  6. if (typeof define === "function" && (define.amd || define.cmd) && !jQuery) {
  7. // AMD或CMD
  8. define([ "jquery" ], function(){
  9. factory(jQuery);
  10. });
  11. } else {
  12. // 全局模式
  13. factory(jQuery);
  14. }
  15. }(function ($) {
  16. $.support.cors = true;
  17. $.fn.citys = function(parameter,getApi) {
  18. if(typeof parameter == 'function'){ //重载
  19. getApi = parameter;
  20. parameter = {};
  21. }else{
  22. parameter = parameter || {};
  23. getApi = getApi||function(){};
  24. }
  25. var defaults = {
  26. dataUrl:'/Public/plugins/json/list.json', //数据库地址
  27. dataType:'json', //数据库类型:'json'或'jsonp'
  28. provinceField:'province', //省份字段名
  29. cityField:'city', //城市字段名
  30. areaField:'area', //地区字段名
  31. code:0, //地区编码
  32. province:0, //省份,可以为地区编码或者名称
  33. city:0, //城市,可以为地区编码或者名称
  34. area:0, //地区,可以为地区编码或者名称
  35. required: true, //是否必须选一个
  36. nodata: 'hidden', //当无数据时的表现形式:'hidden'隐藏,'disabled'禁用,为空不做任何处理
  37. onChange:function(){} //地区切换时触发,回调函数传入地区数据
  38. };
  39. var options = $.extend({}, defaults, parameter);
  40. return this.each(function() {
  41. //对象定义
  42. var _api = {};
  43. var $this = $(this);
  44. var $province = $this.find('select[name="'+options.provinceField+'"]'),
  45. $city = $this.find('select[name="'+options.cityField+'"]'),
  46. $area = $this.find('select[name="'+options.areaField+'"]');
  47. $.ajax({
  48. url:options.dataUrl,
  49. type:'GET',
  50. crossDomain: true,
  51. dataType:options.dataType,
  52. jsonpCallback:'jsonp_location',
  53. success:function(data){
  54. var province,city,area,hasCity;
  55. if(options.code){ //如果设置地区编码,则忽略单独设置的信息
  56. var c = options.code - options.code%1e4;
  57. if(data[c]){
  58. options.province = c;
  59. }
  60. c = options.code - (options.code%1e4 ? options.code%1e2 : options.code);
  61. if(data[c]){
  62. options.city = c;
  63. }
  64. c = options.code%1e2 ? options.code : 0;
  65. if(data[c]){
  66. options.area = c;
  67. }
  68. }
  69. var updateData = function(){
  70. province = {},city={},area={};
  71. hasCity = false; //判断是非有地级城市
  72. for(var code in data){
  73. if(!(code%1e4)){ //获取所有的省级行政单位
  74. province[code]=data[code];
  75. if(options.required&&!options.province){
  76. if(options.city&&!(options.city%1e4)){ //省未填,并判断为直辖市
  77. options.province = options.city;
  78. }else{
  79. options.province = code;
  80. }
  81. }else if(data[code].indexOf(options.province)>-1){
  82. options.province = isNaN(options.province)?code:options.province;
  83. }
  84. }else{
  85. var p = code-options.province;
  86. if(options.province&&p>0&&p<1e4){ //同省的城市或地区
  87. if(!(code%100)){
  88. hasCity = true;
  89. city[code]=data[code];
  90. if(options.required&&!options.city){
  91. options.city = code;
  92. }else if(data[code].indexOf(options.city)>-1){
  93. options.city = isNaN(options.city)?code:options.city;
  94. }
  95. }else if(p>9000){ //省直辖县级行政单位
  96. city[code]=data[code];
  97. }else if(hasCity){ //非直辖市
  98. var c = code-options.city;
  99. if(options.city&&c>0&&c<100){ //同个城市的地区
  100. area[code]=data[code];
  101. if(options.required&&!options.area){
  102. options.area = code;
  103. }else if(data[code].indexOf(options.area)>-1){
  104. options.area = isNaN(options.area)?code:options.area;
  105. }
  106. }
  107. }else{
  108. city[code]=data[code]; //直辖市
  109. if(options.area){
  110. options.city = options.area;
  111. options.area = '';
  112. }
  113. if(options.required&&!options.city){
  114. options.city = code;
  115. }else if(data[code].indexOf(options.city)>-1){
  116. options.city = isNaN(options.city)?code:options.city;
  117. }
  118. }
  119. }
  120. }
  121. }
  122. };
  123. var format = {
  124. province:function(){
  125. $province.empty();
  126. if(!options.required){
  127. $province.append('<option value=""> - 请选择 - </option>');
  128. }
  129. for(i in province){
  130. $province.append('<option value="'+i+'">'+province[i]+'</option>');
  131. }
  132. if(options.province){
  133. $province.val(options.province);
  134. }
  135. this.city();
  136. },
  137. city:function(){
  138. $city.empty();
  139. if(!options.required){
  140. $city.append('<option value=""> - 请选择 - </option>');
  141. }
  142. if(options.nodata=='disabled'){
  143. $city.prop('disabled',$.isEmptyObject(city));
  144. }else if(options.nodata=='hidden'){
  145. $city.css('display',$.isEmptyObject(city)?'none':'');
  146. }
  147. for(i in city){
  148. $city.append('<option value="'+i+'">'+city[i]+'</option>');
  149. }
  150. if(options.city){
  151. $city.val(options.city);
  152. }
  153. this.area();
  154. },
  155. area:function(){
  156. $area.empty();
  157. if(!hasCity){
  158. $area.css('display','none');
  159. }else{
  160. $area.css('display','');
  161. if(!options.required){
  162. $area.append('<option value=""> - 请选择 - </option>');
  163. }
  164. if(options.nodata=='disabled'){
  165. $area.prop('disabled',$.isEmptyObject(area));
  166. }else if(options.nodata=='hidden'){
  167. $area.css('display',$.isEmptyObject(area)?'none':'');
  168. }
  169. for(i in area){
  170. $area.append('<option value="'+i+'">'+area[i]+'</option>');
  171. }
  172. if(options.area){
  173. $area.val(options.area);
  174. }
  175. }
  176. }
  177. };
  178. //获取当前地理信息
  179. _api.getInfo = function(){
  180. var status = {
  181. direct:!hasCity,
  182. province:data[options.province]||'',
  183. city:data[options.city]||'',
  184. area:data[options.area]||'',
  185. code:options.area||options.city||options.province
  186. };
  187. return status;
  188. };
  189. //事件绑定
  190. $province.on('change',function(){
  191. options.province = $(this).val();
  192. options.city = 0;
  193. options.area = 0;
  194. updateData();
  195. format.city();
  196. options.onChange(_api.getInfo());
  197. });
  198. $city.on('change',function(){
  199. options.city = $(this).val();
  200. options.area = 0;
  201. updateData();
  202. format.area();
  203. options.onChange(_api.getInfo());
  204. });
  205. $area.on('change',function(){
  206. options.area = $(this).val();
  207. options.onChange(_api.getInfo());
  208. });
  209. //初始化
  210. updateData();
  211. format.province();
  212. if(options.code){
  213. options.onChange(_api.getInfo());
  214. }
  215. getApi(_api);
  216. }
  217. });
  218. });
  219. };
  220. }));