JS Custom drop-down menu select

Because the system custom select style is really ugly to explode, so the time to write a can be customized drop-down menu style plug-in,

The idea is to hide Select, display content with a span tag, and the UL tag displays a drop-down list:

ie there is a bug, set overflow-y, ie set width is not valid, only test the IE9, the other version is not tested, of course, if you can add a custom style scroll bar is perfect, the time relationship to fill it later

The code is as follows:

1 //Customize the style of the DropDownList,2 //classname the span label style for the simulation3 //Ulclass is a drop-down list style, you can set the following Li style, increase the border background color, color, and so on, such as. ulclass{...} . Ulclass li{....}4 $.fn.extend ({5Dropdowllist:function(classname, ulclass) {6          for(vari = 0; I < This. length; i++) {7             var_this = $ ( This[i]);8             varOparent =_this.parent ();9             varOprev =_this.prev ();Ten             varOdiv = $ ("<div style= ' vertical-align:middle; ') ></div> "); One             varSclass = _this.attr ("Class")? _this.attr ("Class"): "+" "+ classname;//class name A_this.attr ("Class", sclass); -             varOspan = $ ("<span class=" + sclass + "' objtype= ' Dropdownlistspan ' selindex= '" + i + "' ></span>"); -Ospan.css ("Border", _this.css ("border")); theOspan.css ("padding", _this.css ("padding")); -             varPosition = _this.css ("position"); -  -             if(Position = = "Static") { +Odiv.css ("position", "relative"); -             } +             Else { A                 vartop = _this[0].offsettop; at                 varleft = _this[0].offsetleft; -Odiv.css ("position", position); -_this.addclass ("Cloneselect"); -                 varOpclone = _this.parent (). Clone ();//use the clone parent element to calculate top and left -$ ("Body"). Append (Opclone); -                 varOtclonethis = Opclone.children (". Cloneselect"); inOdiv.css ("Top", Otclonethis.css ("Top"))); -Odiv.css ("Left", Otclonethis.css ("left")); toOpclone.remove ();//Delete Clone +             } -             varOclone =_this.clone (); the$ ("Body"). Append (Oclone);//use element clones to add to the body to calculate the height *ODIV.CSS ("Display", _this.css ("Display")); $             varW = oclone[0].offsetwidth + "px";Panax Notoginseng             varH = oclone[0].offsetheight + "px"; -Odiv.css ("width", W); theOdiv.css ("Height", h); +             varLineheight = parseint (h)-parseint (Oclone.css ("Padding-top"))-parseint (Oclone.css ("Padding-bottom")); AOspan.css ("Line-height", Lineheight + "px"); theOspan.css ("width", W); +Ospan.css ("Height", h); -             varOul = $ ("<ul class= '" + Ulclass + "' objtype= ' Dropdownlistul ' style= ' list-style:none;padding-left:0px;text-indent : 5px; ' ></ul> "); $  $Oul.css ("Max-height", "100px"); -Oul.css ("Overflow-y", "scroll"); -Oul.css ("width", W); theOul.children ("Li"). CSS ("width", W); -              for(varj = 0; J < This[I].options.length; J + +) {Wuyi                 varOLi = $ ("<li value= '" + This[I].options[j].value + ' > ' + This[I].options[j].text + "</li>"); theOli[0].optiongsindex =J; - oul.append (oLi); Wu  -Oli.click (function () { About  $                     varOselect = $ ( This). Parent ("UL"). Siblings ("select").); -                     varOspan = $ ( This). Parent ("UL"). Siblings ("span"); -Oselect[0].options.selectedindex = This. Optiongsindex; -                     if(Oselect[0].options.length > 0) { A                         varA = Oselect[0].options[oselect[0].options.selectedindex].text; +                         vars = "<span style= ' display:inline-block;position:absolute;right:4px;top:" + (parseint (ospan.css ("height"))/2-2) + " px width:0; height:0; margin-left:2px; Vertical-align:middle; BORDER-TOP:4PX dashed; border-right:4px solid Transparent; border-left:4px solid transparent; ' ></span> "; theOspan.html (A +s); -                     } $ Oselect.change (); the                 }) the  the$ (document). Bind ("click",function(EVT) {//Click anywhere to hide the drop-down order the                     varEVT = window.event? WINDOW.EVENT:EVT, target = Evt.srcelement | |Evt.target; -                     //stop bubbling, it's like you're risking it. in                     //If an event object is passed in, then it is non-IE browser the                     if(Evt &&evt.stoppropagation) { the                         //so it supports the Stoppropagation () method About evt.stoppropagation (); the}Else { the                         //Otherwise we use IE's method to cancel event bubbling theWindow.event.cancelBubble =true; +                     } -                     if($ (target). attr ("ObjType")! = ' Dropdownlistspan ') { the$ ("ul[objtype= ' Dropdownlistul ')"). Hide ();Bayi                     } the                 }) the             } -Oul.css ("position", "absolute"); -Oul.css ("Top", h); theOul.css ("left", 0); theOclone.remove ();//Delete Clone the odiv.append (Oul); the odiv.append (ospan); - odiv.append (_this); the _this.hide (); the_this.css ("position", "absolute"); theOspan.css ("position", "absolute");94Ospan.css ("Top", 0); theOspan.css ("left", 0); the oul.hide (); the             if(_this[0].options.length > 0) {98                 varA = _this[0].options[_this[0].options.selectedindex].text; About                 vars = "<span style= ' display:inline-block;position:absolute;right:4px;top:" + (parseint (ospan.css ("height"))/2-2) + " px width:0; height:0; margin-left:2px; Vertical-align:middle; BORDER-TOP:4PX dashed; border-right:4px solid Transparent; border-left:4px solid transparent; ' ></span> "; -Ospan.html (A +s);101             }102             if(oprev.length <= 0) {103 oparent.prepend (odiv);104             } the             Else {106 Odiv.insertafter (oprev);107             }108 109Ospan.click (function () { the$( This). Siblings ("UL"). Show ();111             }) the         }113  the     } the})

JS Custom drop-down menu select