页面展示效果如下：
插件代码如下：
|
1
|
ccombobox.js |
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
|
(function($) {
/*
功能：实现一个下拉列表，此下拉列表中的数据可以多选
可以设置 1）下拉列表的宽度，2）下拉表面板的高度
3）显示的数据 数据格式如下
[
{value:"01",text:"立即生效"},
{value:"02",text:"下月生效"},
{value:"03",text:"前台录入"}
]
*/
$.fn.ccombobox = function() {
var
method = arguments[0];
if
($.fn.ccombobox.methods[method]) {
method = $.fn.ccombobox.methods[method];
arguments = Array.prototype.slice.call(arguments, 1);
} else
if (typeof
method === "object"
|| !method) {
method = $.fn.ccombobox.methods.init;
} else
{
$.error("Method "
+ method + " does not exist!");
return
this;
}
return
method.apply(this, arguments);
};
$.fn.ccombobox.methods = {
init : function() {
var
ops = $.extend({}, $.fn.ccombobox.defaults, arguments[0] || {});
return
$(this).each(function() {
var
sel = $(‘<select id="‘+ ops.id +‘" style="width:‘+ops.width+‘px"></select>‘);
var
dat = ops.data;
console.log(dat);
var
j=0;
var
v_sel_cont ="";
for
(j=0; j< dat.length; j++)
{
v_sel_cont += ‘<input type="‘
+ ops.type + ‘" value="‘
+dat[j].value +‘"><span>‘+dat[j].text +‘</span><br/>‘
}
var
sel_cont=$(‘<div id="‘
+ ops.id+‘_cont"‘+‘>‘+
v_sel_cont +
‘</div>‘);
$("body").append(sel_cont)
$(this).append(sel);
$(‘#‘+ops.id).combo({
editable:ops.editable,
panelHeight:ops.panelHeight
});
$(‘#‘+ops.id + ‘_cont‘
).appendTo( $(‘#‘+ops.id).combo(‘panel‘
) );
var
sel_cont_input = $(‘#‘+ops.id + ‘_cont‘
+ ‘ input‘);
sel_cont_input.click(function(){
var
objs = sel_cont_input;
console.log(objs);
var
i ;
var
t =""
;
var
v =""
;
for(i=0; i<objs.length; i++)
{
var
obj = objs[i];
console.log(obj);
if("checked"
== $(obj).attr("checked") )
{
t += $(obj).next("span").text() + ",";
v += $(obj).val() +",";
}
}
if(""
!= t)
{
t = t.substr(0, t.length-1);
v = v.substr(0, v.length-1);
}
console.log(t);
console.log(v);
$(‘#‘+ops.id).combo("setText",t).combo("setValue",v);
$(‘#‘+ops.id).combo(‘hidePanel‘);
});
});
}
};
$.fn.ccombobox.defaults = {
id : "",
type: "checkbox",
data:{},
width:200,
panelHeight:80,
editable:false
};
})(jQuery); |
下拉列表数据文件：data.js
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
var
DATA = DATA || {};
DATA.efftype=[ {value:"01",text:"立即生效"},
{value:"02",text:"下月生效"},
{value:"03",text:"前台录入"}
];DATA.exptype=[ {value:"01",text:"立即失效"},
{value:"02",text:"月底失效"},
{value:"03",text:"前台录入"}
]; |
页面展示代码如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=gbk"
/>
<link rel="stylesheet"
type="text/css"
href="js/easyui/themes/default/easyui.css"/>
<link rel="stylesheet"
type="text/css"
href="js/easyui/themes/icon.css"/>
<script type="text/javascript"
src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript"
src="js/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript"
src="style/js/data.js"></script>
<script type="text/javascript"
src="style/js/plugin/ccombobox.js"></script>
<script>
$(function(){
$("#test").ccombobox({
id : "efftype",
data:DATA.efftype,
width:300,
panelHeight:100
});
$("#test2").ccombobox({
id : "exptype",
data:DATA.exptype,
width:300,
panelHeight:100
});
});
</script>
<title>test</title>
</head>
<body >
<div id="test"></div>
<div id="test2"></div>
</body>
</html> |