基于jquery的checkbox下拉框插件代码

option_check.js代码 ：

/***************************************** 
调用方法为： 
Jselect($("#inputid"),{ 
bindid:'bindid', 
hoverclass:'hoverclass', 
optionsbind:function(){return hqhtml();} 
}); 
inputid为下拉框要绑定的文本框id 
bindid为点击弹出/收回下拉框的控件id 
hoverclass为鼠标移到选项时的样式 
hqhtml为绑定的数据 
******************************************/ 
(function($){ 
$.showselect = { 
init : function(o,options){ 
var defaults = { 
bindid : null, //事件绑定在bindid上 
hoverclass:null, //鼠标移到选项时样式名称 
optionsbind:function(){} //下拉框绑定函数 
} 
var options = $.extend(defaults,options); 
if(options.optionsbind!=null){//如果绑定函数不为空 
this._setbind(o,options); 
} 
if(options.bindid!=null){ 
this._showcontrol(o,options); 
} 
}, 
_showcontrol:function(o,options){//控制下拉框显示 
$("#"+options.bindid).toggle(function(){ 
$(o).next().slideDown(); 
},function(){ 
$(o).next().slideUp(); 
}) 
}, 
_setbind:function(o,options){//绑定数据 
var optionshtml="<div style=\"z-index: 999; position: absolute;\">" 
+options.optionsbind()+"</div>"; 
$(o).after(optionshtml); 
var offset= $(o).offset(); 
var w=$(o).width(); 
$(o).next().css({top:offset.top+$(o).height()+7,left:offset.left,width:w}); 
if(options.hoverclass!=null){ 
$(o).next().find("tr").hover(function(){$(this).addClass(options.hoverclass);}, 
function(){$(this).removeClass(options.hoverclass);}); 
} 
$(o).next().find("input[type=checkbox]").filter("[lang=checked]").each(function(){$(this).attr("checked","checked");}); 
$(o).next().find("input[type=checkbox]").click(function(){ 
var $ckoption=$(this).attr("checked"); 
if($ckoption){ 
$(this).attr("checked",""); 
}else{ 
$(this).attr("checked","checked"); 
} 
}); 
$(o).next().find("tr").click(function(){ 
var $ckflag=$(this).find("input[type=checkbox]"); 
if($ckflag.attr("checked")){ 
$ckflag.attr("checked",""); 
$ckflag.attr("lang",""); 
} 
else{ 
$ckflag.attr("checked","checked"); 
$ckflag.attr("lang","checked"); 
} 
var selarray=new Array(); 
$(o).next().find("input[type=checkbox]").each(function(){ 
if($(this).attr("checked")) 
selarray.push($(this).parent().next().text()); 
}); 
$(o).val(selarray.join(',')); 
}); 
$(o).next().hide(); 
} 
} 
Jselect = function(o,json){ 
$.showselect.init(o,json); 
}; 
})(jQuery);

html代码：

<script type="text/javascript" src="jquery-1.4.2.min.js"></script> 
<script type="text/javascript" src="option_check.js"></script> 
<style type="text/css"> 
.hover 
{ 
background-color: Blue; 
color: White; 
} 
</style> 
<script type="text/javascript"> 
$(function(){ 
Jselect($("#txt_wbk"),{ 
bindid:'txt_wbk', //可绑定到按钮上，此处为点击文本框显示下拉框 
hoverclass:'hover', 
optionsbind:function(){return hqhtml();} 
}); 
}) 
function hqhtml(){//此处可在数据库中取值后拼接html，注意：预选项加上 lang='checked'属性 
var optionshtml="<table style='width:100%; background-color: Red' cellpadding=\"0\" cellspacing=\"0\" >“ 




+”<tr><td style='width:20px'><input type=\"checkbox\" value='1' /></td><td>第一项</td></tr>" 

　 +"<tr><td><input type=\"checkbox\" value='2' lang='checked'/></td><td>第二项</td></tr>" 

 +"<tr><td><input type=\"checkbox\" value='3' /></td><td>第三项</td></tr>" 
+"<tr><td><input type=\"checkbox\" value='4' /></td><td>第四项</td></tr></table>"; 
return optionshtml; 
} 
</script> 
<div> 
<input id="txt_wbk" type="text" style="width: 200px;" />下拉框测试 
</div>