Tip: You can modify some of the code before running
<! 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> <title> Form Effects-very good JavaScript simulation pull-down menu </ title> <meta http-equiv= "Content-type" content= "text/html;charset=gb2312" > <!--Add the following code to <pead> and Between </pead>--> <style type= "Text/css" > body{margin:20px auto;font-family:arial,helvetica,sans-serif; Font-size:12px;width:950px;height:400px;border:solid 1px #aaa;p osition:relative;padding:10px;} Ul{margin:0;padding:0;list-style:none; dropdownlist{position:absolute;left:100px;top:100px;}/*.dropDownList Div.dropdown Select{display:none;} * * DropDownList div.dropdown{float:left;margin-right:50px;width:200px; dropDownList span{display:block;width : 146px;height:26px;background:url (yun_qi_img/select.gif) left top no-repeat;line-height:26px;text-indent:12px; Border:solid 1px #83BBD9; cursor:default;} . dropDownList Span.over{background-posItion:left bottom;border-color: #B4C91A;} . dropDownList ul{background: #eee; width:200px;display:none;} . dropDownList ul li{height:20px;width:100%;p adding:3px 0;text-indent:12px;cursor:default; . dropDownList ul Li.over{background: #ccc;} . DropDownList Ul.show{display:block} </style> </pead> <body> <!--Add the following code to <body> and </ Body> between--> <form action= "#" method= "get" > <div class= "dropDownList" > <div id= "DropDownList1" class= "dropdown" > <select name= "Birthday" > <option> birthday </option> <option>1985</option& Gt <option>1986</option> <option>1987</option> <option>1988</option> <option& gt;1989</option> </select> <span> Please select birthday </span> <ul></ul> </div> <div I D= "DropDownList2" class= "dropdown" > <select name= "Sex" > <option> sex </option> <option> male &L t;/option> <option> Female </option> </select> <span> Please select gender </span> <ul></ul> </div> <div id= "dropdownl Ist3 "class=" dropdown "> <select name=" Student "> <option> education </option> <option> Primary School </opti On> <option> Junior </option> <option> High School </option> <option> University </option> </sel ect> <span> Please select education </span> <ul></ul> </div> </div> </form> <script type= "Text/javascript" > var ____configarray; function __initdropdownlist (Configarray) {//Get select menu ____configarray=configarray; var existarray=configarray.split ("|"); for (Var i=0;i<existarray.length;i++) {if (existarray[i].length<1) {return;} Get the div according to the parameter, and add the event var Parentcontainer=document.getelementbyid (Existarray[i]) separately; if (!parentcontainer) {return;} Gets the following select, and gets the option var selectobj=parentcontainer.getelementsbytagname ("select"); if (selectobj.length<1) {return;} var optionArray=selectobj[0].getelementsbytagname ("option"); Get option, and add to each Li var optionlength=optionarray.length separately; for (Var j=0;j<optionlength;j++) {//Get UL to be able to add item var ulobj=parentcontainer.getelementsbytagname ("ul"); if (ulobj.length<1) {return;} Gets span so that the currently selected item var spanobj=parentcontainer.getelementsbytagname ("span") can be displayed; if (spanobj.length<1) {return;} var liobj=document.createelement ("Li"); var textnode=document.createtextnode (Optionarray[j].firstchild.nodevalue) liobj.appendchild (TextNode); Liobj.setattribute ("Currentindex", j); Add Event Liobj.onclick=function () {Selectcurrentitem (this.parentnode,this) to each liobj; } liobj.onmouseover=function () {this.classname= "over";} Liobj.onmouseout=function () {this.classname= "";} Ulobj[0].appendchild (Liobj); Spanobj[0].onclick=function (Event) {//If it is currently displayed, hide it, and vice versa Showhiddenul (this); } spanobj[0].onmouseover=function () {this.classname= ' over ';} Spanobj[0].onmouseout=function ({this.classname= "";}; Ulobj[0].onclick=function () {this.classname= "";} } parentcontainer.onclick=function (Event) {if (!event) {event=window.event} Block event bubbling event.cancelbubble=true; var eventulobj=this.getelementsbytagname ("ul") [0]; Bodyclickhiddenul (Eventulobj); }} function Selectcurrentitem (ulobj,currentobj) {var parentobj=ulobj.parentnode; var spanobj=parentobj.getelementsbytagname ("span") [0]; Spanobj.firstchild.nodevalue=currentobj.firstchild.nodevalue; var selectobj=parentobj.getelementsbytagname ("select") [0]; Selectobj.selectedindex=parseint (Currentobj.getattribute ("Currentindex")); function Showhiddenul (currentobj) {var parentnode=currentobj.parentnode; var ulobj=parentnode.getelementsbytagname ("ul") [0]; if (ulobj.classname== "") {ulobj.classname= "show"; }else{ulobj.classname= ""; }//Click the body area (not "pull-down menu") to hide Menu function Addbodyclick (func) {var bodyobj=document.getelementsbytagname ("Body") [0]; var oldbodyclick = Bodyobj.onclick; if (typeof bodyobj.onclick!= ' function ') {Bodyobj.onclick = func; else {Bodyobj.onclick = function () {Oldbodyclick (); Func (); }}//Hide all ul function Bodyclickhiddenul (eventulobj) {var existarray=____configarray.split ("|"); for (Var i=0;i<existarray.length;i++) {if (existarray[i].length<1) {return;} Look for all UL and hide Var Parentcontainer=document.getelementbyid (existarray[i]); if (!parentcontainer) {return;} var ulobj=parentcontainer.getelementsbytagname ("ul"); if (Eventulobj!=ulobj[0]) {ulobj[0].classname= ""; }} var __dropdownlist= "Dropdownlist1|dropdownlist2|dropdownlist3"; __initdropdownlist (__dropdownlist); Add this to make sure that you can also hide the menu Addbodyclick (Bodyclickhiddenul) When you click on the body area. </script> </body> </ptml>
Tip: You can modify some of the code before running
