完整中英文世界国家级联下拉列表插件【前端版】

为什么80%的码农都做不了架构师?>>>   hot3.png

这个小东西是之前小项目上临时增加功能的产物,那时候在网上找了很久都没有能用的插件,要么是数据残缺少得可怜,还有就是实现手段非常低效不可维护那种,各种奇拔问题!反正就没有逞心如意!那时候又急需要这样一个功能,百般无奈后灵机一动,想起某企鹅功能选项不是有这样的世界国家级联功能嚒!那肯定有地方存着这数据的哇!嘿嘿!心里突然暗喜,终于有方向,然后就是向这企鹅开刀找!在某个i18n国际化文件夹中找到了!立马放下心头大石!

完整中英文世界国家级联下拉列表插件【前端版】_第1张图片 完整中英文世界国家级联下拉列表插件【前端版】_第2张图片

这样子中英文版本的数据都有了!但是问题又来了!该怎么开始做呢?

怎么去调用这个数据呢?

想法一:把数据拆分出来导入数据库,然后Ajax级联获取数据

想法二:把数据转换成熟悉的格式,在前端获取后递归拆分

想法三:直接利用jquery读取xml然后捉取数据(这是完成这插件后很久回头想到!逼于屌丝项目时间赶没多考虑的结果)

后来我是选择了第二种方案,转换成json对象,在前端递归获取数据;

其实这个方案也是不错的!JS对象属性查找效率是非常不错的!

那这个方案要怎么转换成又方便又简单的数组数据呢?又地让国家、省份、城市、区级之间又有关联

那时候是直接用元素名作为keyName关联;

其实那时候具体过程已经忘记了,直接贴那时候PHP的代码,

(string)$CountryRegion['Name'],'Code'=>'c'.$cCode);
		
		foreach ( $CountryRegion as $State ) {
			
			if(!empty($State['Name']))
			{
				$StateArr['c'.$cCode][] = array('Name'=>(string)$State['Name'],'Code'=>'s'.$cState);
			}
			
			foreach ( $State as $City ) {
				
				if(!empty($City['Name']))
				{
					if(!empty($State['Code']))
						$CityArr['s'.$cState][] = array('Name'=>(string)$City['Name'],'Code'=>'c'.$cCity);
					else
						$CityArr['c'.$cCode][] = array('Name'=>(string)$City['Name'],'Code'=>'c'.$cCity);
				}
				
				foreach ( $City as $Region ) {
					
					if(!empty($Region['Name']))
					{
						if(!empty($City['Code']))
							$RegionArr['c'.$cCity][] = array('Name'=>(string)$Region['Name'],'Code'=>'r'.$cRegion);
					}
					#县级代码
					$cRegion++;
				}
				#城市代码
				$cCity++;	
			}
			#省份代码
			$cState++;
		}
		#国家代码
		$cCode++;
	}
	//echo '
';print_r(array('country'=>$CountryArr,'state'=>$StateArr,'city'=>$CityArr,'region'=>$RegionArr));exit;
	echo(json_encode(array('country'=>$CountryArr,'state'=>$StateArr,'city'=>$CityArr,'region'=>$RegionArr)));exit;
?>

JSON数据的样子

完整中英文世界国家级联下拉列表插件【前端版】_第3张图片

接着就是前段JS的编写!碍于当时没多少时间去写!代码非常糟糕!哎!算是一个工程版!

用jquery框架辅助!开发效率十分高!执行效率也还行!就是需要加载完整的地理数据稍稍慢!320kb的数据还能接受吧!对于客户突来的需求!

(function($){
	$.fn.extend({
		GlobalGeography:function(){
			
			/* ._GlobalGeography_ { width:282px; height:30px !important; position:relative; left:-282px; top:2px; } */
			
			var relatedObj = ['div[id="country"]','div[id="state"]','div[id="city"]','div[id="region"]'];
			var excludeObj = ['div[id="region"]'];	
			var selectmenu = ['country','state','city','region'];
			var selector   = this.selector;
			
			/*输出下拉列表*/
			function _traversal(source,type){
				if(typeof(source)!='undefined'){
					var _select_  = '';
						_select_ += '';
					$.each(source,function(i,v){
						_select_ += ''+v.Name+'';
					});
					_select_ += '';
					return _select_;
				}
				return false;
			};
			
			/*清除/还原下级关联下拉菜单*/
			function cleanNextMenu(index){
				for(var i=index;i

html代码



	
		
		
		
		
			._GlobalGeography_ { width:200px; }
		
	
	
		

执行效果,这里有一个问题,就是英文版只去到城市就没了!所以数据包大小也减半只有148kb

//这里主要是用了非入侵方式,数组元素分别对应selectmenu
var relatedObj = ['div[id="country"]','div[id="state"]','div[id="city"]','div[id="region"]'];
//这里主要控制级联到哪个级别就不再继续执行
var excludeObj = ['div[id="region"]'];
var selectmenu = ['country','state','city','region'];

完整中英文世界国家级联下拉列表插件【前端版】_第4张图片011411_2U7c_4731.png

这个小东西是抛砖引玉了!实现手段并不高效!代码有很多地方可以改进!

整理代码时候翻出来,希望能帮助到有需要的人!



转载于:https://my.oschina.net/Jacker/blog/339857

你可能感兴趣的:(完整中英文世界国家级联下拉列表插件【前端版】)