The checkbox dropdown box plug-in code based on jquery _jquery

Option_check.js Code:

Copy Code code as follows:

/*****************************************
The Calling method is:
Jselect ($ ("#inputid"), {
Bindid: ' Bindid ',
Hoverclass: ' Hoverclass ',
Optionsbind:function () {return hqhtml ();}
});
inputID the text box ID to bind for the Drop-down box
Bindid the control ID for clicking the eject/retract drop-down box
Hoverclass the style when you move the mouse to the option
Hqhtml for bound data
******************************************/
(function ($) {
$.showselect = {
Init:function (o,options) {
var defaults = {
Bindid:null,//event binding on Bindid
Hoverclass:null,//mouse move to option style name
Optionsbind:function () {}//dropdown box binding function
}
var options = $.extend (defaults,options);
if (options.optionsbind!=null) {//If the bound function is not empty
This._setbind (o,options);
}
if (options.bindid!=null) {
This._showcontrol (o,options);
}
},
_showcontrol:function (o,options) {//Control dropdown box Display
$ ("#" +options.bindid). Toggle (function () {
$ (O). Next (). Slidedown ();
},function () {
$ (O). Next (). Slideup ();
})
},
_setbind:function (o,options) {//Bind data
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 (the 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 code:

Copy Code code as follows:

<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 ',//can be bound to the button, here for the Click Text box to display the dropdown box
Hoverclass: ' Hover ',
Optionsbind:function () {return hqhtml ();}
});
})
function hqhtml () {//Here you can add values to the database to stitch HTML, note: Preselection items plus lang= ' checked ' attributes
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> first item </ Td></tr> "
+ "<tr><td><input type=\" checkbox\ "value= ' 2 ' lang= ' checked '"/></td><td> the second item &LT;/TD ></tr> "
+ "<tr><td><input type=\" checkbox\ "value= ' 3 '/></td><td> third item </td></tr>"
+ "<tr><td><input type=\" checkbox\ "value= ' 4 '/></td><td> fourth </td></tr> </table> ";
return optionshtml;
}
</script>
<div>
<input id= "TXT_WBK" type= "text" style= "width:200px;"/> Drop-down box test
</div>