Because although the realization of trouble point, if the use of the Select, very simple to complete, but this code is in fact to tell you a JS in the Web application of the actual combat, a variety of elements of the coordination between the role.
The effect of the following figure:
<! 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> dropdown Select box </title> < Meta http-equiv= "Content-type" content= "text/html;charset=gb2312" > <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;} H1{font-size:12px;color: #444;} Ul{margin:0;padding:0;list-style:none;} . dropdownlist{position:absolute;left:100px;top:100px;} . DropDownList div.dropdown{float:left;margin-right:120px;} . DropDownList Span{display:block;width:146px;height:26px;background:url (/upload/2010-3/20100303231959754.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{width:200px;display:none;position:absolute;} DropDownList ul Li{background: #eee; height:20px;width:100%;p adding:3px 0;text-indent:12px;cursor:default; line-height:20px;} /* Normal state of the style * * DropDownList ul li.normal{background: #eee;} /* The style of the mouse move/* dropDownList ul li.over{background: #ccc;} /* The selected style/* dropDownList ul li.current{background: #c2c2c2; font-weight:bold;} . DropDownList Ul.show{display:block;} </style> </pead> <body> <form action= "#" method= "get" > <div class= "dropDownList" > & Lt;div id= "DropDownList1" class= "dropdown" > <select name= "Birthday" > <option> Please select </ Option> <option>1986</option> <option>1987</option> < Option selected= "selected" >1988</option> <option>1989</option> <OPTION&G T;1990</option> </select> <span> Please select the year </span> <ul></ul> </div> <div id= "DropDownList2" class= "Dropdown" > <select name= "Sex" > <option> sex </option> <option> Male </option> <option selected= "selected" > Women </option> <option> not male, not female </o ption> </select> <span> Please select sex </span> <ul></ul> </div> ; <div id= "DropDownList3" class= "dropdown" > <select name= "Student" > <option> Preschool Class </ Option> <option> primary </option> <option selected= "selected" > Junior </option> <option> High School </option> </select> <span> Please select Education </span> < ul></ul> </div> </div> </form> <script type= "Text/javascript" > var ____configarr Ay 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); If option selected= "selected" if (optionarray[j].selected) {Selectcurrentitem (Ulobj[0],liob j); }//Add Event Liobj.onclick=function () {Selectcurrentitem () to each liobj (this.parentnode,th IS); } liobj.onmouseover=function () {if (This.className.indexOf ("current") <0) {this.classname= ' over ';}} Liobj.onmouseout=function () {if (This.className.indexOf ("current") <0) {this.classname= ' normal ';}} 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} 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")); var ulliobj=ulobj.getelementsbytagname ("Li"); var length=ulliobj.length; var currentliobj=null; for (Var i=0;i<length;i++) {Currentliobj=ulliobj[i]; Currentliobj.classname= "Normal"; } CurreNtobj.classname= "Current"; 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>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
