<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <ptml xmlns=" http://www.w3.org/1999/xhtml "> <pead> <meta http-equiv=" Content-type "content=" text/html; charset=gb2312 "/> <title> Simulated landscaping select_ cloud habitat </title> <script type=" Text/javascript "> var zquery=fu Nction (ele,tagname,classname) {//Core object if (window = this) return to new Zquery (Ele,tagname,classname); if (!arr) {var arr=new Array;} if (ele) {if (ele.constructor!=zquery) {var elem=typeof (ele) = = "Object"? Ele:document.getElementById (Ele ); if (!tagname) {Arr.push (elem); }else{var tags=elem.all&&!window.opera?tagname== "*" Elem.all:elem.all.tags (tagName): Elem.getelem Entsbytagname (TagName); if (!classname) {for (Var i=0, l=tags.length; i<l; i++) {Arr.push (tags[i)); }}else{var reclassname=regexp ("(^|\\s+)" +classname+ "($|\\s+)"); For (var i=0, l=tags.length; i<l; i++) {if (Reclassname.test (Tags[i].classname)) { Arr.push (Tags[i]); }}}}else{for (Var i=0, l=ele.length; i<l; i++) {Arr=arr.concat (Array.prototype.slice.call (Zquery (Ele[i],tagname,classname))); }} return This.setarray (arr); Using the jquery method, this returns the Zquery object prototype (a Dom collection object), no longer returning a simple Dom array object} ZQuery.prototype.setArray = function (arr) {This.length = 0; Array.prototype.push.apply (this, arr); The concept here is very important, and the Zquery method object executes the push () method of the array prototype. } Zquery.fn=zquery.prototype; var $=zquery; Absolute position of Select, high, wide function Offset (obj) {var t = obj.offsettop; var L = obj.offsetleft; var w = obj.offsetwidth; var h = obj.offsetheight-2; var h=obj.style.height; while (obj=obj.offsetparent) {t+=obj.offsettop; L+=obj.offsetleft; return {top:t, left:l, Width:w, height:h}///Simulate Select Functi On Instselect (obj) {var offset=offset (obj); Obj.style.display= "None"; var sdiv=document.createelement ("div"); Sdiv.id= "Div" +obj.name; Sdiv.classname= "Divslt"; sdiv.style.width=offset.width+ "px"; sdiv.style.height=offset.height+ "px"; sdiv.style.left=offset.left+ "px"; sdiv.style.top=offset.top+ "px"; Document.body.appendChild (SDIV); var sspan=document.createelement ("span"); var Spanid=obj.options[obj.selectedindex].value; var Spantext=obj.options[obj.selectedindex].text; Sspan.id=spanid; sspan.style.lineheight=offset.height+ "px"; Stxt=document.createtextnode (Spantext); Sspan.appendchild (Stxt); Sdiv.appendchild (Sspan); Sspan.onclick=function () {if ($ ("div" +obj.name, "ul"). length==0) {var sul=document.createelement ("ul") ; Sdiv.appendchild (SUL); var optlen=obj.options.length; var tmp=document.createdocumentfragment (); for (Var j=0;j<optlen;j++) {var sltval=obj.options[j].value; var Slttxt=obj.options[j].text; var sli=document.createelement ("Li"); Sli.id=sltval; Sli.appendchild (document.createTextNode (slttxt)); Sli.onmouseover=function () {this.style.background= "#cccccc"; this.style.color= "White"; } sli.onmouseout=function () {this.style.background= "white"; This.style.color= "BLACK"; } sli.onclick=function () {Sspan.innerhtml=this. InnerHTML; Obj.value=this.id; Sul.style.display= "None"; Tmp.appendchild (SLi); } sul.appendchild (TMP); if (optlen>3) {sul.style.overflowy= "scroll"; Sul.style.height= "100px"; } else{if ($ ("div" +obj.name, "ul") [0].style.display== "None") $ ("div" +obj.name, "ul") [0].sty le.display= "Block"; else $ ("div" +obj.name, "ul") [0].style.display= "None"; }}///Get the number of slect and perform function functions Initselect () {var slt=$ (document, "select") for each select; var sltlen=slt.length; for (Var i=0;i<sltlen;i++) {Instselect (slt[i]); }} Window.onload=initselect; Document.onclick=function () {var evt=getevent (); var Element=evt.srcelement | | Evt.target; var s=$ (document, "select"); if (element.parentnode.parentnode==null| | Element.parentnode.parentnode.classname!= "Divslt") &&element.nodename!= "SPAN") {for (var i=0; i<s.length; i++) {if (!$ ("D IV "+ S[i].name," ul ") [0]) continue; $ ("div" + s[i].name, "ul") [0].style.display= "None"; }} function GetEvent () {//At the same time compatible with IE and FF if (document.all) return window.event; Func=getevent.caller; while (Func!=null) {var arg0=func.arguments[0]; if (arg0) {if (arg0.constructor==event | | arg0.constructor ==mouseevent) | | (typeof (arg0) = = "Object" && arg0.preventdefault && arg0.stoppropagation)) {return arg0; }} Func=func.caller; return null; } </script> <style type= "Text/css" > select{height:20px; width:150px; }. divslt{Position:absolute; font-size:12px; }. divslt span{display:block; width:100%; border:1px solid #999999; Background:url (down.gif) No-repeat right center; text-indent:6px; Cursor:pointer; }. divslt ul{display:block; Background-color: #FFFFFF; width:100%; border:1px solid #999999; border-top:0px; margin:0px; padding:0px; List-style:none; }. divslt ul li{text-indent:5px; height:20px; line-height:20px; Cursor:pointer; } </style> </pead> <body> <form id= "Form1" Name= "Form1" method= "Post" action= "rq.asp" ><tab Le width= "border=" "0" cellspacing= "0" cellpadding= "0" > <tr> <td width= "" height= "" > & lt;/td> <td width= "height=" > </td> <td width= "height=" >&NBSP;</TD&G T </tr> <tr> <td width= "height=" > </td> <td width= "" height= ">" </td> <td width= "height=" "><select name=" Slt1 "id=" SLT1 "> <option value=" option one "Selected=" selected > Option one </option> <option value= "option two" > option two;/option> <option value= "option three" > option three </option> <option value= "option four" > option four </option> <option value= "option five" > option five </option> <option value= "option six" > option six </option> <option value = "Options Seven" > Options seven </option> </select></td> </tr> <tr> <td width= "Heig" ht= "> </td> <td width=" "height=" ><select name= "slt2" id= "SLT2" > <option value= "option One" selected= "selected" > Option one </option> <option value= "option two" > option two </option> <opti On value= "option three" > option three </option> </select></td> <td width= "MB" height= "> <" /TD> </tr> <tr> <td width= "a" height= "> </td> <td width=" "Heig ht= "><input" type= "Submit" name= "Submit" value= "submitted"/></td> <td width= "height=" > </td> </TR> </table> </form> </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
