jQuery 插件练习 多选下拉列表
页面展示效果如下:
插件代码如下:
ccombobox.js
(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
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:"前台录入"} ];
页面展示代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <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>