Advantages: Click the body area can also hide the Drop-down menu, and the body will not have the OnClick event conflict.
Disadvantage: Please point out, humbly accept!
The running box code looks numerous, is helpless, please download the attachment, in order to better observe or modify ~!
<! 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> pull-down menu </title> <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; position: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> <p>javascript simulate pull-down menu, do a hasty, open-minded accept criticism. </p> <form action= "#" method= "get" > <div class= "dropDownList" > <div id= "DropDownList1" class= "Dropdown" > <select name= "Birthday" > <option> Please select </option> <opti on>1988</option> <option>1989</option> </select> <span> Please select Year </span> <ul></ul> </div> <div id= "DropDownList2" class= "dropdown" > <select name= "Sex" > <option> sex </option> <option> man </option> <option> Women </option> </select> <span> Please select gender </span> <ul></ul> </div> <div id= "drop DownList3 "class=" dropdown "> <select name=" student "> <option> child class </option> <option> primary </option> <option> Junior </option> </select> ;span> Please select education </span> <ul></ul> </div> </div> </form> </body> </ptml> <script type= "Text/javascript" >//JavaScript Document 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 project Var Ulobj=parentcontainer.getelementsbytagna Me ("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 VarParentcontainer=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>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
