下拉菜单复选框控件html,基于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="

"

+options.optionsbind()+"

";

$(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代码：

.hover

{

background-color: Blue;

color: White;

}

$(function(){

Jselect($("#txt_wbk"),{

bindid:'txt_wbk', //可绑定到按钮上，此处为点击文本框显示下拉框

hoverclass:'hover',

optionsbind:function(){return hqhtml();}

});

})

function hqhtml(){//此处可在数据库中取值后拼接html，注意：预选项加上 lang='checked'属性

var optionshtml="

+”

第一项"

+"

第二项"

+"

第三项"

+"

第四项";

return optionshtml;

}

下拉框测试