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

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

 

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

怎么去调用这个数据呢?

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

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

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

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

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

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

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

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

<?php
if(true)
{
	$file = dirname(__FILE__).‘/LocList_en.xml‘;
	$obj  = simplexml_load_file($file);

	$CountryArr = array();
	$StateArr   = array();
	$CityArr    = array();
	$RegionArr  = array();

	$cCode = 1; $cState = 1; $cCity = 1; $cRegion = 1;

	foreach ( $obj as $CountryRegion ) {

		$CountryArr[] = array(‘Name‘=>(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 ‘<pre>‘;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数据的样子

接着就是前段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 class="_GlobalGeography_">‘;
						_select_ += ‘<option value=""></option>‘;
					$.each(source,function(i,v){
						_select_ += ‘<option value="‘+v.Code+‘">‘+v.Name+‘</option>‘;
					});
					_select_ += ‘</select>‘;
					return _select_;
				}
				return false;
			};

			/*清除/还原下级关联下拉菜单*/
			function cleanNextMenu(index){
				for(var i=index;i<relatedObj.length;i++){
					if(typeof(relatedObj[(i+1)])!=‘undefined‘){
						$(relatedObj[(i+1)]).find(‘._GlobalGeography_‘).remove();
						$(relatedObj[(i+1)]).find(‘input‘).val(‘‘);
					}
				}
			}

			/*遍历获取下拉菜单内容*/
			function checkMenu(json){
				/*遍历赋值所有类型*/
				$.each(relatedObj,function(i,v){
					if($.inArray(v,excludeObj)==-1){
						$(v).find(‘select‘).bind(‘change‘,function(){
							var _code_ = $(this).val(); cleanNextMenu(i);
							if(typeof(json[selectmenu[(i+1)]][_code_])!=‘undefined‘){
								$(relatedObj[(i+1)]).append(_traversal(json[selectmenu[(i+1)]][_code_],selectmenu[(i+1)]));
								/*绑定方法*/
								$(relatedObj[(i+1)]).find(‘._GlobalGeography_‘).bind(‘change‘,function(){
									$(relatedObj[(i+1)]).find(‘input‘).val($(this).find(‘option:selected‘).text());
								});
								checkMenu(json);
							} else {
								$(relatedObj[(i+2)]).append(_traversal(json[selectmenu[(i+2)]][_code_]));
								/*绑定方法*/
								$(relatedObj[(i+2)]).find(‘._GlobalGeography_‘).bind(‘change‘,function(){
									$(relatedObj[(i+2)]).find(‘input‘).val($(this).find(‘option:selected‘).text());
								});
							}
						});
					}
				});
			}

			/*加载世界国家城市数据*/
			$.getJSON("db_en.dat",function(json){
				/*输出国家列表*/
				$(selector).append(_traversal(json.country,‘country‘));
				$(selector).find(‘._GlobalGeography_‘).bind(‘change‘,function(){
					$(selector).find(‘input‘).val($(this).find(‘option:selected‘).text());
				});
				checkMenu(json);
			});
		}
	})
})(jQuery);

html代码

<!DOCTYPE>
<html>
	<head>
		<meta charset="utf-8">
		<script src="jquery.js"></script>
		<script src="country_noinv.js"></script>
		<style type="text/css">
			._GlobalGeography_ { width:200px; }
		</style>
	</head>
	<body>
		<div id="country"></div>
		<div id="state"></div>
		<div id="city"></div>
		<div id="region"></div>
	</body>
</html>
<script>
$(document).ready(function(){
	$(‘#country‘).GlobalGeography();
});
</script>

执行效果,这里有一个问题,就是英文版只去到城市就没了!所以数据包大小也减半只有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‘];

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

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

时间: 2024-10-12 11:31:05

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

级联下拉列表

//根据所选的省,自动生成对应的市 <html> <head> <title>级联列表</title> <meta http-equiv='Content-Type' content='text/css;charset=utf-8'/> <style> .yemian{ margin-left:30%; text-align:center; font-size:50px; width:500px; height:500px; back

原生js实现级联下拉列表

<!DOCTYPE> <html> <head> <title>级联下拉列表</title> <meta charset="UTF-8"> </head> <body > <div> <select class='prov' id='prov' onchange='changeCity()'> <option value=''>--请选择省--</o

基于Twitter Bootstrap 3的jQuery下拉列表插件

metisMenu是一款基于Twitter Bootstrap 3的炫酷jQuery下拉列表插件.该下拉列表插件在原生bootstrup下拉列表的基础上进行了美化,使其支持多级下拉菜单.列表树和鼠标滑过展开等特效. 在线演示:http://www.htmleaf.com/Demo/201502281435.html 下载地址:http://www.htmleaf.com/jQuery/Menu-Navigation/201502281434.html

VS Code C# 插件离线版 1.6.2

VS Code C# 插件离线版,目前最新稳定版为:1.6.2 . 由于在扩展中下载C#插件总是缓慢,或者容易出现错误,特制作离线版本共享出来. 本离线版本为Windows版本,其他系统请在扩展中下载官方插件. VS Code C# 1.6.2版本下载地址:C# 1.6.2离线版本(密码:mQdd) 安装教程: 打开VS Code ->扩展,然后选择点击右侧的三个点 ->从 VSIX 安装->选择插件文件即可.

第三方登录插件.NET版XY.OAuth-CSharp

XY.OAuth-CSharp GitHub:XY.OAuth-CSharp OSChina:XY.OAuth-CSharp 第三方登录插件.NET版 使用 首先,从NuGet上安装"XY.OAuth" 然后在项目配置文件的根节点下"configuration"的子节点"appSettings"中添加如下下配置信息: 1 <!--第三方登录配置 Start--> 2 <!-- 客户端ID --> 3 <add key

推荐ajaxfilemanager for tiny_mce 比较完善的tiny_mce编辑器的图片上传及图片管理插件PHP版 支持中文

tiny_mce编辑器,我觉得挺简洁.好用的,但就是图片上传的插件是收费的,而且网上找了半天也没有找到开源好用的上传插件. 不过功夫不负有心人,终于还就被我找到一款相当满意的插件. 这个插件的名字叫ajaxfilemanager 官方网址是http://www.phpletter.com/DOWNLOAD/ Tinymce Ajax File and Image Manager Tinymce Ajax File and Image Manager Version 1.0 Final Proje

腾讯通RTX 群扩展插件 正式版许可授权

腾讯通 RTX 状态感知插件 正式版许可授权 此许可授权包含自定义总机号.授权使用时间至永久,授权用户数999. PS:感兴趣的朋友可以先到官网下载试用版进行功能测试,使用上满意后再来此处进行购买许可授权. 随着RTX企业用户的增大,越来越多的群组讨论在企业中普遍,但是RTX中的群需要在服务器添加,这样大大的受到局限:且群组没有资料共享库,资料不能及时共享:不能发布群公告等制约因素. 群功能扩展插件就是专门了为了解决上述问题设计的,使用之后,用户可以在客户端实现所有操作,实现群成员资料共享,大大

彩38完整源码下载+带H5自适应手机版

彩38完整源码下载+带H5自适应手机版源码下载Q:2947702644运行环境:WIN+APACHE+PHP5.4+MYSQL5.6+伪静态源码授权:无加密文件及认证授权,永久性可直接使用.版本支持:PC/WAP网页版编程语言:PHP开发框架:ThinkPHP框架开发ThinkPHP是一个框架:MVC(采用面向对象思想)框架 市面上常用的框架: zend framework yii thinkPHP ThinkPHP: 有完善的中文资料,使用相对来说比较多 下载ThinkPHP 解压之后生成两个

jquery弹出下拉列表插件(实现kindeditor的@功能)

这几天有个工作需求,就是在富文本输入区域(kindeditor)可以有@功能,能够容易提示用户名的(像在qq群组@人一样).在网上找了一个叫bootstrap-suggest的插件,却不能满足我的需求,于是我决定在该插件上改良,主要是下面几点: 1. @内容的输入,能够匹配多个属性值. 2. 选中列表值后,是成块插入kindeditor的(方便删除,也利于区分文本). 3. 修正输入偶数关键字@功能失效问题. 前言 在一开始,我用bootstrap-suggest(https://github.