js+div实现的下拉列表

<style>
.selectDiv{border:1pxsolid#ff9900;}
.optionDiv{border:1pxsolid#ff9900;border-top:0px;position:absolute;visibility:hidden;}
.optionDivdiv{font-size:12px;font-family:Tahoma;padding-left:8px;line-height:160%;cursor:default;width:100%;}
.defaultSelect{font-size:12px;font-family:Tahoma;text-align:center;border:1pxsolid#ff9900;cursor:default;width:100px;}
.arrow{font-family:webdings;line-height:13px;border:1pxoutsetbuttonhighlight;background-color:#ff9900;width:15px;text-align:center;cursor:default;font-size:8px;}
</style>
<SCRIPTLANGUAGE="JavaScript"DEFER>
//用户变量
varoWhere=document.body;
varOptionText=newArray();
OptionText[0]="--优秀网站--";
OptionText[1]="CSDN.net";
OptionText[2]="蓝色理想";
OptionText[3]="PcHome";
OptionText[4]="MSDN.com";
//下拉菜单主体
varselectDiv=document.createElement("table");
varselectDivTR=selectDiv.insertRow();
vardefaultValueTD=selectDivTR.insertCell();
vararrow=selectDivTR.insertCell();
with(selectDiv)cellSpacing=0,cellPadding=0,border=0,className="selectDiv";
with(defaultValueTD)innerText=OptionText[0],className="defaultSelect";
with(arrow)innerText=6,className="arrow";
oWhere.appendChild(selectDiv);
//外层Div
varoptionDiv=document.createElement("div");
//设置下拉菜单选项的坐标和宽度
with(optionDiv.style){
varselect=selectDiv;
varxy=getSelectPosition(select);
pixelLeft=xy[0];
pixelTop=xy[1]+select.offsetHeight;
width=selectDiv.offsetWidth;
optionDiv.className="optionDiv";
}
//下拉菜单内容
varOptions=newArray();
for(vari=0;i<OptionText.length;i++){
Options[i]=optionDiv.appendChild(document.createElement("div"));
}
for(i=0;i<Options.length;i++){
Options[i].innerText=OptionText[i];
}
oWhere.appendChild(optionDiv);

/*事件*/
//禁止选择文本
selectDiv.onselectstart=function(){returnfalse;}
optionDiv.onselectstart=function(){returnfalse;}
//下拉菜单的箭头
arrow.onmousedown=function(){
this.setCapture();
this.style.borderStyle="inset";
}
arrow.onmouseup=function(){
this.style.borderStyle="outset";
this.releaseCapture();
}
arrow.onclick=function(){
event.cancelBubble=true;
optionDiv.style.visibility=optionDiv.style.visibility=="visible"?"hidden":"visible";
}
document.onclick=function(){
optionDiv.style.visibility="hidden";
}
defaultValueTD.onclick=function(){
event.cancelBubble=true;
optionDiv.style.visibility=optionDiv.style.visibility=="visible"?"hidden":"visible";
}
//移动Option时的动态效果
for(i=0;i<Options.length;i++){
Options[i].attachEvent("onmouseover",function(){moveWithOptions("highlight","white")});
Options[i].attachEvent("onmouseout",function(){moveWithOptions("","")});
Options[i].attachEvent("onmouseup",selectedText);
}
functionmoveWithOptions(bg,color){
with(event.srcElement){
style.backgroundColor=bg;
style.color=color;
}
}
functionselectedText(){
with(event.srcElement){
defaultValueTD.innerText=innerText;
}
with(defaultValueTD.style)background="highlight",color="white";
}
/*通用函数*/
//获取对象坐标
functiongetSelectPosition(obj){
varobjLeft=obj.offsetLeft;
varobjTop=obj.offsetTop;
varobjParent=obj.offsetParent;
while(objParent.tagName!="BODY"){
objLeft+=objParent.offsetLeft;
objTop+=objParent.offsetTop;
objParent=objParent.offsetParent;
}
return([objLeft,objTop]);
}
</SCRIPT>