最近由于项目需求,表单填写涉及到大量的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地址:点击下载