select选择框js小插件

最近由于项目需求，表单填写涉及到大量的select选择框，表单数据存储的话用的是int类型(因为后台要对数据进行筛选，如果将select选择对应的字符串直接存储，则在数据量大的情况下大大降低的筛选效率)。因为反反复复一直在写option的重复代码，感觉又臭又长，又一直想学着写Jquery插件，所以今天上午抽空学习了下，将select的数组简单的封装了一下在js文件里写死，在页面可直接调用相应的方法创建option和获取option的值，这样改过之后，至少代码看上去较为简洁了，而且写成插件后可扩展性也强，便于以后添加其他功能。如果跟我一样完全不理解相关知识的话可以先看看写Jquery插件的基本知识。下面直接贴上我写的js代码。

//为避免冲突，将我们的方法用一个匿名方法包裹起来
(function($){
	//自定义数组
	var sex = ["保密","男士","女士"];
	var investAmount = ["10万以下","10万——30万","30万——50万","50万以上"];
	
	var hashMap = {   //自定义创建的hasmap                
		Set : function(key,value){this[key] = value},                   
		Get : function(key){return this[key]},                   
		Contains : function(key){return this.Get(key) == null?false:true},                   
		Remove : function(key){delete this[key]}               
	} 
	
	//默认参数
	var defaults = {
		"sex":sex,
		"investAmount":investAmount,
	};
	
	$.fn.selectUI = function(options){
		//扩展默认参数
		defaults = $.extend(defaults, options); 
		
		//插件的实现代码
		this.each(function(){
			//遍历参数 以key,value形式存进自定义hashMap
            $.each(defaults,function(key,value){
				hashMap.Set(key,value);
			});
        });
		
		//获取select对象
		var _this = $(this);
		
		//创建option key为键名
		this.create = function(key){
			var html = "";
<span style="white-space:pre">			</span>if(arr[i] == "其他"){
<span style="white-space:pre">				</span>html = "<option value='99'>"+arr[i]+"</option>";
<span style="white-space:pre">			</span>}else{
<span style="white-space:pre">				</span>html = "<option value='"+i+"'>"+arr[i]+"</option>";
<span style="white-space:pre">			</span>}
<span style="white-space:pre">			</span>_this.append(html);
		}
		
		//获取指定位置的数据对应的值 key为键名 pos为数组下标
		this.getValue = function(key,pos){
		<span style="white-space:pre">	</span>if(pos == 99){
<span style="white-space:pre">				</span>return "其他";
<span style="white-space:pre">			</span>}else{
<span style="white-space:pre">				</span>return hashMap.Get(key)[pos];
<span style="white-space:pre">			</span>}
		}
		
		return this;
	};
})(jQuery);

这只是我上午写的样例版，如果有更多的option数组的话，先在开始定义一个数组变量，再将数组变量写到默认参数defaults里就好。当然，这是个死做法，事实上这个地方我怎么也想不出灵活的扩展办法，如果在页面上对默认参数进行扩展的话，那么其他页面调用同一个数组时，又得扩展一遍，十分麻烦，所以我能想到的只是在js文件里写死这一方法，至少这样可以让我页面上的代码稍微简洁一点。

下面简单说下我的思路：

这边我定义了2个方法。create(key)方法是创建option的方法，在页面上通过如下方法调用，可直接依据数组创建多个option选项，不过这里要注意我是根据数组下标的值来入库的，所以一定要注意一一对应关系。另外为了方便扩展，我将"其他"属性赋值的是99，默认最后显示。这样做之后，如果要往数组里继续添加选项，这样做后数据库不用做改动，只改变js文件数组就行了，99理论上已经足够大了。

<select id="select" class="form-control">
<script>
	var temp = $('#select').selectUI({});
	temp.create("investAmount");
</script>

getValue(key,pos)方法可直接获取到指定数组对应下标的字符串，如下调用：

alert(temp.getValue("sex",2));

由于要通过键值来获取对应的数组，所以这里我自定义了一个hashMap用来读写数据。

附上demo地址：点击下载