原文出处:http://www.nbb.cc/78/2006/05/javascriptselect_1.html
如图 代码来自yahoo
上网查找很多表单中 select 美化的代码,都没有合适的,偶尔有也不是很舒服只能在IE里面正常显示。看到 yahoo 上的代码在 FireFox下面也能正常显示,而且非常漂亮,所以花了点时间把它Copy下来呵呵,给大家分享。
代码实现原理用隐藏的input来代替select,然后用另外一个只读input来显示select的框,用图片来表示下拉箭头,用层来显示下拉列表,用javascript把下拉列表里面a的name的值赋给隐藏的input和只读的input,最终实现虚拟select的效果。
这样做不但多种浏览器支持,而且很方便对外观做美化,列表里面自由灵活的布局。
代码如下:
1.<link href="Css/Select.css" rel="stylesheet" type="text/css" /> Css样式表对我们虚拟出来的Select做美化
2.<script language="JavaScript" type="text/javascript" src="Js/Select.js"></script> 实现功能的主要JS
3.HTML代码以及如何调用
<form action="xyz.asp" method="post" name="add_composition" id="add_composition">
<div class="selectControl">
<input name="dengji" type="hidden" value="" />
<input name="dengji_c" size="5" value="请选择" readonly="readonly" />
</div>
<div class="selectControlOption" id="list_dengji" style="width:50px;height:150px;">
<table width="100%" align="center" border="0" cellspacing="5" cellpadding="0">
<tr><td><a href="#" name="" selected>请选择</a></td></tr>
<tr><td><a href="#" name="1">第一集</a></td></tr>
<tr><td><a href="#" name="2">第二集</a></td></tr>
<tr><td><a href="#" name="3">第三集</a></td></tr>
<tr><td><a href="#" name="4">第四集</a></td></tr>
<tr><td><a href="#" name="5">第五集</a></td></tr>
</table>
</div>
<script>
var e_dengji = new htmlElementSelect('add_composition', 'dengji_c', 'dengji', 'list_dengji');
</script>
</form>
以下是Select.css代码(点击下载):
/* CSS Document */
.selectControlOption{display:none;}
.selectDownList a:link,.selectDownList a:visited{font-size:12px;display:block;width:100%;text-decoration:none;color:#000;}
.selectDownList a:hover,.selectDownList a:active{
font-size:12px;
display:block;
width:100%;
text-decoration:none;
color:#fff;
background-color: #6699FF;
}
.selectControlBtn,.selectBtnover,.selectBtnclick{cursor:pointer;_cursor /* */:hand;}
.selectControlBtn{position:absolute;width:16px;height:20px;overflow:hidden;background:url(../Img/Select_btn.gif) no-repeat;top:0;_top:1px;}
.selectControl{position:relative;}
.clsInput{border:1px solid #2f6bc1 !important;font-size:12px !important;padding:.2em .1em .15em .1em; _height /* */:20px;}
.selectBtnover{background:url(../Img/Select_btnover.gif) no-repeat;}
.selectBtnclick{background:url(../Img/Select_btnclk.gif) no-repeat;}
.selectDownList{
position:absolute;
overflow:auto;
background:#fff;
z-index:100;
border: 1px solid #99CCFF;
}
.selectCurStatus {color:#ff0000;}
以下是Select.js代码(点击下载):
[code]var htmlElementSelectManager={lastSelectElement:null,lastSelectIframeElement:null};function htmlElementSelect(frmName,inpName,valName,lstId){this.init(frmName,inpName,valName,lstId);}
htmlElementSelect.prototype.version="0.1.2";htmlElementSelect.prototype.parentForm=null;htmlElementSelect.prototype.self=null;htmlElementSelect.prototype.saveValue=null;htmlElementSelect.prototype.selectButton=null;htmlElementSelect.prototype.listContent=null;htmlElementSelect.prototype.dropDownList="";htmlElementSelect.prototype.relationControl=null;htmlElementSelect.prototype.init=function(frmName,inpName,valName,lstId){var that=this;if(!document.forms[frmName]||!document.forms[frmName].elements[inpName]||!document.forms[frmName].elements[valName]||!document.getElementById(lstId))return false;this.listContent=document.getElementById(lstId);this.parentForm=document.forms[frmName];this.self=document.forms[frmName].elements[inpName];this.saveValue=document.forms[frmName].elements[valName];var divp=this.self.parentNode;if(!divp)return false;this.self.className="clsInput";divp.style.width=this.self.offsetWidth+"px";divp.style.height=this.self.offsetHeight+"px";var downBtn=document.createElement("div");downBtn.className='selectControlBtn';downBtn.style.right="-15px";divp.appendChild(downBtn);this.selectButton=downBtn;var lstdiv=document.createElement("div");lstdiv.className="selectDownList";lstdiv.id=frmName+"_"+inpName+"_downlistId";lstdiv.style.display="none";this.dropDownList=lstdiv.id;divp.appendChild(lstdiv);var lstifrm=document.createElement("iframe");lstifrm.id=lstdiv.id+"_ifrm";lstifrm.zIndex=parseInt(lstdiv.style.zIndex)-1;lstifrm.style.display="none";lstifrm.frameBorder=0;lstifrm.style.position="absolute";lstifrm.style.filter="alpha(opacity:0)";lstifrm.style.background="transparent";lstifrm.scrolling="no";divp.appendChild(lstifrm);downBtn.onmouseover=function(){that.handleOverBtn(that);}
downBtn.onmouseup=function(){that.handleOverBtn(that);}
downBtn.onmouseout=function(e){that.handleOutBtn(that,e);}
downBtn.onmousedown=function(){that.handleClickBtn(that);}
this.self.onclick=downBtn.onmousedown;this.self.onmouseout=downBtn.onmouseout;this.self.onmouseover=downBtn.onmouseover;downBtn=null;};htmlElementSelect.prototype.handleOverBtn=function(o){o.selectButton.className="selectControlBtn selectBtnover";};htmlElementSelect.prototype.handleOutBtn=function(o,e){o.selectButton.className="selectControlBtn";};htmlElementSelect.prototype.handleClickBtn=function(o){var downlstfrm=document.getElementById(o.dropDownList+"_ifrm");var downlst=document.getElementById(o.dropDownList);var selectmgr=htmlElementSelectManager;if(selectmgr.lastSelectElement!=null&&selectmgr.lastSelectElement!=downlst){selectmgr.lastSelectElement.style.display="none";selectmgr.lastSelectIframeElement.style.display="none";}
selectmgr.lastSelectElement=downlst;selectmgr.lastSelectIframeElement=downlstfrm;downlst.parentNode.style.zIndex=100;o.selectButton.className="selectControlBtn selectBtnclick";downlst.style.width=(o.listContent.style.width==""||parseInt(o.listContent.style.width.replace("px",""))<o.self.offsetWidth+15)?(o.self.offsetWidth+15)+"px":o.listContent.style.width;downlst.style.height=(o.listContent.style.height=="")?"200px":o.listContent.style.height;if(o.listContent.innerHTML==""){downlst.style.height="20px";downlst.style.width=(o.self.offsetWidth+18)+"px"}
downlstfrm.style.width=downlst.style.width;downlstfrm.style.height=downlst.style.height;var direc=o.showDirection(o,[downlst.style.width.replace("px",""),downlst.style.height.replace("px",""),o.self.parentNode.offsetLeft,o.self.parentNode.offsetTop,o.self.offsetHeight]);if(direc[0]=='left'){downlst.style.left=0;downlstfrm.style.left=0;}else if(direc[0]=='right'){downlst.style.right="-16px";downlstfrm.style.right="-16px";}
if(direc[1]=='down'){downlst.style.top=o.self.offsetHeight+"px";downlstfrm.style.top=o.self.offsetHeight+"px";}else if(direc[1]=='up'){downlst.style.top="-"+(parseInt(downlst.style.height.replace("px",""))-1)+"px";downlstfrm.style.top="-"+(parseInt(downlst.style.height.replace("px",""))-1)+"px";}
downlst.style.display=(downlst.style.display=="block")?"none":"block";downlstfrm.style.display=downlst.style.display;downlst.innerHTML=o.listContent.innerHTML;if(downlst.style.display=="block"){var itms=downlst.getElementsByTagName("a");for(var i=0;i<itms.length;i++){itms[i].onclick=function(){o.handleSetValue(o,this);downlst.style.display="none";o.changeListContentState(o,this.name);downlstfrm.style.display="none";return false;}}
itms=null;var mout=function(e){o.selectButton.className="selectControlBtn";if(!e)var e=window.event;if(e.relatedTarget){var relTarget=e.relatedTarget;}else{var relTarget=e.toElement;}
if(!relTarget)return;try{if(relTarget.tagName.toLowerCase()=="html"||relTarget.tagName.toLowerCase()=="body"){downlst.style.display="none";downlstfrm.style.display="none";downlst.parentNode.style.zIndex=0;}else if(o.isInTarget(relTarget,o.dropDownList)){downlst.style.display="block";downlstfrm.style.display="block";downlst.parentNode.style.zIndex=100;}else if(relTarget.tagName.toLowerCase()=="a"&&relTarget.name!=""){downlst.style.display="block";downlstfrm.style.display="block";downlst.parentNode.style.zIndex=100;}else if(relTarget.className!="clsInput"&&relTarget.className!="selectDownList"&&relTarget.className!="selectControlBtn"){downlst.style.display="none";downlstfrm.style.display="none";downlst.parentNode.style.zIndex=0;}}catch(err){}};o.selectButton.onmouseout=mout;o.self.onmouseout=mout;document.onclick=function(e){var e=(e)?e:window.event;var el=(e.target)?((e.target.nodeValue==3)?e.target.parentNode:e.target):e.srcElement;if(!o.isInTarget(el,o.dropDownList)&&el!=o.selectButton&&el!=o.self){downlst.style.display="none";downlstfrm.style.display="none";downlst.parentNode.style.zIndex=0;document.onclick=null;}};}};htmlElementSelect.prototype.isInTarget=function(targo,id){var el=targo;if(!el)return false;while(el==null||el.tagName.toLowerCase()!="body"){if(el.id==id){return true;}
if(!el.parentNode)return false;el=el.parentNode;}};htmlElementSelect.prototype.showDirection=function(o,dimArry){var dlstW=(o.listContent.style.width==""||parseInt(o.listContent.style.width.replace("px",""))<o.self.offsetWidth+15)?o.self.offsetWidth+15:parseInt(o.listContent.style.width.replace("px",""));var dlstH=(o.listContent.style.height=="")?200:parseInt(o.listContent.style.height.replace("px",""));if(typeof(window.innerHeight)=='number'){var wH=window.innerHeight;var wW=window.innerWidth;}else if(document.documentElement&&document.documentElement.clientHeight){var wH=document.documentElement.clientHeight;var wW=document.documentElement.clientWidth;}else{var wH=document.body.clientHeight;var wW=document.body.clientWidth;}
var sY=0;if(document.documentElement&&document.documentElement.scrollTop){sY=document.documentElement.scrollTop;}else if(document.body&&document.body.scrollTop){sY=document.body.scrollTop;}else if(window.pageYOffset){sY=window.pageYoffset;}else if(window.scrollY){sY=window.scrollY;}
if(dimArry[0]>dimArry[2]&&(dimArry[3]-sY)+dimArry[4]+dlstH>wH){return['left','up'];}else if(dimArry[0]<=dimArry[2]&&(dimArry[3]-sY)+dimArry[4]+dlstH>=wH){return['right','up'];}else if(dimArry[0]<=dimArry[2]&&(dimArry[3]-sY)+dimArry[4]+dlstH<wH){return['right','down'];}else{return['left','down'];}};htmlElementSelect.prototype.changeListContentState=function(o,elnm){if(!elnm||elnm=='')return;var itms_c=o.listContent.getElementsByTagName("a");for(var j=0;j<itms_c.length;j++){if(elnm==itms_c[j].name){itms_c[j].style.backgroundColor="#0000be";itms_c[j].style.color="#ffffff";}else{itms_c[j].style.backgroundColor="";itms_c[j].style.color="";}}};htmlElementSelect.prototype.handleSetValue=function(o,itm){setSelectItemValue(o,itm);};htmlElementSelect.prototype.setRelationControl=function(o,relo){o.relationControl=relo;}
function setSelectItemValue(o, itm){
o.saveValue.value = itm.name;
o.self.value = itm.innerHTML;
}[/code]