Simulate a select script with JavaScript and CSS _ form effects

Source: Internet
Author: User
Tags tagname
<! 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=" &GT;&NBSP;&LT;/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> &LT;/TR&GT </table> </form> </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
Related Article

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.