自制 checkbox下拉框插件（JQuery版）

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>