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>

　　推荐阅读

　　jquery ajax 同步异步的执行示例代码

大家先看一段简单的jquery ajax 返回值的js 代码 复制代码 代码如下: function getReturnAjax{ $.ajax({ type:"POST", http://www.jb51.net/userexist.aspx", data:"username="+vusername.value, success:function>>>详细阅读

本文标题：基于jquery的checkbox下拉框插件代码

地址：http://www.17bianji.com/kaifa2/JS/26150.html

 1/2    1