替换Select标签的javascript类

// 下拉列表类// PubEdition: Version 1.0.0.0// ModifyDate: 2009-12-09 9:30:00// FinishDate: 2009-12-09 9:30:00// AuthorName: binbin( Mail:[e-mail] / Tel:[phone] )var droplistswap=function(){};droplistswap.prototype.originalElement=new Array();//droplistswap.prototype.hidedroplist=function(evt){//var my = this;//var _event = window.event?window.event:evt; // var obj = _event.toElement?_event.toElement:_event.relatedTarget;// while( obj!=null && obj.id!="droplistElement"){// obj = obj.parentNode;// }// if(obj==null)document.getElementById("droplistElement").style.display="none"; //}droplistswap.prototype.initialize=function(DropID,index){ var my = this;my.originalElement.push(document.getElementById(DropID));var selectElement=document.createElement('div');selectElement.innerHTML="<label>"+document.getElementById(DropID).options[document.getElementById(DropID).selectedIndex].text+"</label>";//selectElement.style.position="relative";selectElement.id="selectElement"+index;selectElement.className="droplistswap";//selectElement.style.width="80px";selectElement.style.top=document.getElementById(DropID).style.top;selectElement.style.left= document.getElementById(DropID).style.left;document.getElementById(DropID).parentNode.appendChild(selectElement);document.getElementById(DropID).style.display="none";//function的参数名称不能和类成员的参数名称相同//my.addEventListener(document,"click",function(event){my.hidedroplist.call(my,event)});my.addEventListener(selectElement,"click",function(event,p_ID,p_Index){my.handledroplist.call(my,event,DropID,index)});}droplistswap.prototype.handledroplist=function(evt,DropID,OriIndex){var my = this;//alert(OriIndex);var _event = window.event?window.event:evt; //if( _event == null ||typeof(_event) == 'undefined'){ //var _fun = my.handledroplist.caller; //_event = _fun.arguments[0];//}var elementtarget=_event.srcElement?_event.srcElement:_event.target;if(document.getElementById("droplistElement")){ var removenode=document.getElementById("droplistElement"); var parentnode=removenode.parentNode; parentnode.removeChild(removenode); } var droplistElement=document.createElement('div'); droplistElement.id="droplistElement"; droplistElement.style.display="block"; droplistElement.style.position="absolute";droplistElement.style.zIndex="999"; droplistElement.style.top=my.getObjectPosition(document.getElementById("selectElement"+OriIndex)).y+19+"px"; droplistElement.style.left=my.getObjectPosition(document.getElementById("selectElement"+OriIndex)).x+"px"; droplistElement.style.padding="0px"; droplistElement.style.margin="0px"; droplistElement.style.overflow="hidden"; droplistElement.style.textAlign="left"; var ulElement=document.createElement('ul'); ulElement.style.listStyleType="none";ulElement.style.padding="0px";ulElement.style.margin="0px";ulElement.style.overflow="hidden"; ulElement.style.border="1px solid #20826c"; ulElement.style.overflow="hidden"; for(var i=0;i<document.getElementById(DropID).options.length;i++){ newli=document.createElement('li'); newli.style.borderBottom="1px solid #edf9f8"; newli.style.backgroundColor="#ffffff"; newli.style.lineHeight="180%"; newli.style.paddingLeft="5px"; newli.style.paddingRight="15px"; newli.style.margin="0px"; newli.style.cursor="pointer"; newli.style.display="block"; newli.style.overflow="hidden"; newli.style.width="80px"; newli.innerHTML=document.getElementById(DropID).options[i].text; ulElement.appendChild(newli); my.addEventListener(newli,"click",function(event,p_Index){my.handledropli.call(my,event,OriIndex)}); my.addEventListener(newli,"mouseover",function(event){my.handledropliover.call(my,event)}); my.addEventListener(newli,"mouseout",function(event){my.handledropliout.call(my,event)}); }droplistElement.appendChild(ulElement); document.getElementById(DropID).parentNode.appendChild(droplistElement); my.addEventListener(droplistElement,"mouseout",function(event){my.handledropout.call(my,event)});}droplistswap.prototype.handledropout=function(evt) { var my = this; var _event = window.event?window.event:evt; // if( _event == null ||typeof(_event) == 'undefined'){ // var _fun = handledropli.caller; // _event = _fun.arguments[0]; // } var elementtarget=_event.srcElement ? _event.srcElement : _event.target; //The question of element that is on the elements var obj = _event.toElement?_event.toElement:_event.relatedTarget; while( obj!=null && obj.id!="droplistElement"){ obj = obj.parentNode; } if(obj==null)document.getElementById("droplistElement").style.display="none"; } droplistswap.prototype.handledropliover=function(evt) { var my = this; var _event = window.event?window.event:evt; var elementtarget=_event.srcElement ? _event.srcElement : _event.target; elementtarget.style.backgroundColor="#edf9f8"; } droplistswap.prototype.handledropliout=function(evt) { var my = this; var _event = window.event?window.event:evt; var elementtarget=_event.srcElement ? _event.srcElement : _event.target; elementtarget.style.backgroundColor="#ffffff"; } droplistswap.prototype.handledropli=function(evt,OriIndex){var my = this;var _event = window.event?window.event:evt; // if( _event == null ||typeof(_event) == 'undefined'){ // var _fun = handledropli.caller; // _event = _fun.arguments[0];// }var elementtarget=_event.srcElement ? _event.srcElement : _event.target;var newelement=document.createElement("label");newelement.innerHTML=elementtarget.innerHTML;document.getElementById("selectElement"+OriIndex).innerHTML="";document.getElementById("selectElement"+OriIndex).appendChild(newelement);document.getElementById("droplistElement").style.display="none";for (var i=0;i<my.originalElement[OriIndex].options.length ;i++ ) { if (document.getElementById("selectElement"+OriIndex).innerHTML.indexOf(my.originalElement[OriIndex].options[i].text)!=-1) { document.getElementById(my.originalElement[OriIndex].id).selectedIndex =i; } } //setTimeout('__doPostBack(/''+my.originalElement[OriIndex].id+'/',/'/')', 0); //alert(document.getElementById(my.originalElement[OriIndex].id).selectedIndex);}droplistswap.prototype.addEventListener=function(element,type,func){if(element.addEventListener){element.addEventListener(type,func,false);}else{element.attachEvent("on"+type,func);}}// Event Bubbling droplistswap.prototype.stopBubble=function(e) { if (e && e.stopPropagation) {e.stopPropagation();} else {e.cancelBubble = true;} } droplistswap.prototype.getObjectPosition=function(obj) { var ua = navigator.userAgent.toLowerCase(); var isOpera = (ua.indexOf('opera') != -1); var isIE = (ua.indexOf('msie') != -1 && !isOpera); var el=typeof obj==='string'?getElement(obj):obj; if(el.parentNode === null || el.style.display == 'none') { return false; } var parent = null; var pos = []; var box; if(el.getBoundingClientRect) //IE { box = el.getBoundingClientRect(); var scrollTop = Math.max(document.documentElement.scrollTop, document.body.scrollTop); var scrollLeft = Math.max(document.documentElement.scrollLeft, document.body.scrollLeft); if(ua.indexOf('msie 6') != -1||ua.indexOf('msie 7') != -1) { scrollLeft=scrollLeft-2; } return {x:box.left + scrollLeft, y:box.top + scrollTop}; } else if(document.getBoxObjectFor) { box = document.getBoxObjectFor(el); var borderLeft = (el.style.borderLeftWidth)?parseInt(el.style.borderLeftWidth):0; var borderTop = (el.style.borderTopWidth)?parseInt(el.style.borderTopWidth):0; pos = [box.x - borderLeft, box.y - borderTop]; } else { pos = [el.offsetLeft, el.offsetTop]; parent = el.offsetParent; while (parent) { pos[0] += parent.offsetLeft; pos[1] += parent.offsetTop; parent = parent.offsetParent; } if (ua.indexOf('opera') != -1 || ( ua.indexOf('safari') != -1 && el.style.position == 'absolute' )) { pos[0] -= document.body.offsetLeft; pos[1] -= document.body.offsetTop; } } if (el.parentNode) { parent = el.parentNode; } else { parent = null; } while (parent && parent.tagName != 'BODY' && parent.tagName != 'HTML') { pos[0] -= parent.scrollLeft; pos[1] -= parent.scrollTop; if (parent.parentNode) { parent = parent.parentNode; } else { parent = null; } } return {x:pos[0], y:pos[1]}; }