Option_check.js Code :
Copy code The Code is as follows: /*************************************** **
The call method is as follows:
Jselect ($ ("# inputid "),{
Bindid: 'bindid ',
Hoverclass: 'hoverclass ',
Optionsbind: function () {return hqhtml ();}
});
Inputid is the ID of the text box to be bound to the drop-down box.
Bindid is the Control ID in the pop-up/pull-back drop-down box.
Hoverclass is the style when you move the cursor over the option.
Hqhtml is the bound data
**************************************** **/
(Function ($ ){
$. Showselect = {
Init: function (O, options ){
VaR defaults = {
Bindid: NULL, // bind the event to bindid
Hoverclass: NULL, // style name when you move the cursor over the option
Optionsbind: function () {}// bind a function to the drop-down list
}
VaR Options = $. Extend (defaults, options );
If (options. optionsbind! = NULL) {// If the binding function is not empty
This. _ setbind (O, options );
}
If (options. bindid! = NULL ){
This. _ showcontrol (O, options );
}
},
_ Showcontrol: function (O, options) {// control the drop-down list
$ ("#" + 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 ();
Detail (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 code: Copy code The Code is 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 ', // You can bind it to the button. The drop-down box is displayed in the click Text Box.
Hoverclass: 'hover ',
Optionsbind: function () {return hqhtml ();}
});
})
Function hqhtml () {// You can splice the value in the database with HTML. Note: The lang = 'checked' attribute is added to the pre-Options.
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> Item 1 </TD> </tr>"
+ "<Tr> <TD> <input type = \" checkbox \ "value = '2' lang = 'checked'/> </TD> <TD> Item 2 </ TD> </tr>"
+ "<Tr> <TD> <input type = \" checkbox \ "value = '3'/> </TD> <TD> Item 3 </TD> </tr >"
+ "<Tr> <TD> <input type = \" checkbox \ "value = '4'/> </TD> <TD> Item 4 </TD> </tr> </table> ";
Return optionshtml;
}
</SCRIPT>
<Div>
<Input id = "txt_wbk" type = "text" style = "width: 200px;"/> drop-down box test
</Div>
