tambc

< BODY  style =font-size:12 >  
下拉选择框： 

< select  style =width:200 >  
　  < option > 经过rebuild的下拉选择框1 </ option >  
  < option > 经过rebuild的下拉选择框2 </ option >  
  < option > 经过rebuild的下拉选择框3 </ option >  
  < option > 经过rebuild的下拉选择框4 </ option >  
  < option > 经过rebuild的下拉选择框5 </ option >  
</ select >  
< div  align =center  style ="position: absolute; line-height: 200px; left: 91; top: 39; width: 300; height: 202; background-color: #d4d0c8; background-repeat: repeat; background-attachment: scroll; border: 1px solid #808080; background-position: 0%" > 层模拟的对话框或菜单 </ div >  
</ BODY >  
< script >  
selRebuild() 
function  selRebuild() { 
　　 var  l,i,j,w,h,ol,sel,tx,bx 
　　 if ( ! document.all) 
　　　　 return  
　　ol = document.getElementsByTagName( " select " ) 
　　 for (i = 0 ;i < ol.length;i ++ ) { 
　　　　sel = ol[i] 
　　　　 if (sel.rebuild == 1 ) 
　　　　　　 continue  
　　　　sel.rebuild = 1  
　　　　sel.w = sel.offsetWidth 
　　　　sel.style.display = " none "  
　　　　l = " <input readonly onmouseup=this.style.backgroundPositionY=0 "  
　　　　l += "  style=’width: " + sel.w + " ;height:21px;background:url(41.gif) right top no-repeat’> "  
　　　　l += " <div onmousedown=event.cancelBubble=true style=position:absolute;cursor:default></div> "  
　　　　sel.insertAdjacentHTML( " afterend " ,l) 
　　　　tx = sel.nextSibling 
　　　　 if (sel.length > 0 ) 
　　　　　　tx.value = sel.options[sel.selectedIndex].text 
　　　　bx = tx.nextSibling 
　　　　bx.sel = sel 
　　　　document.body.previousSibling 
　　　　tx.onmousedown = function () { 
　　　　　　 var  tx = this ,sel = tx.previousSibling,bx = tx.nextSibling 
　　　　　　 if (window.$bxSelectOption != null ) 
　　　　　　　　window.$bxSelectOption.innerHTML = ""  
　　　　　　tx.style.backgroundPositionY =- 17  
　　　　　　h = bx.sel.options.length * 15 + 3  
　　　　　　 if (h <= 2 || h > 167 ) 
　　　　　　　　h = 167  
　　　　　　 
　　　　　　l = " <div style=’position:absolute;left:- " + sel.w + " ;top:22;width: " + sel.w + " ;height: " + h + " ;background:white;border:1px solid black;overflow:auto’> "  
　　　　　　l += " <table onselectstart=return(false) cellpadding=0 cellspacing=0 style=width:100%;font-size:12> "  
　　　　　　 for (j = 0 ;j < sel.length;j ++ ) { 
　　　　　　　　l += " <tr height=15 onclick=this.parentNode.parentNode.parentNode.parentNode.optionClick() "  
　　　　　　　　l += "  onmouseover=this.parentNode.parentNode.parentNode.parentNode.optionMove(this.rowIndex)> "  
　　　　　　　　l += " <td valign=bottom style=padding-left:2> " + sel.options[j].text + " </td></tr> "  
　　　　　　}  
　　　　　　l += " </table></div> "  
　　　　　　bx.innerHTML = l 
　　　　　　window.$bxSelectOption = bx 
　　　　　　 if (bx.sel.length > 0 ) 
　　　　　　　　bx.optionMove(bx.sel.selectedIndex) 
　　　　　　event.cancelBubble = true  
　　　　}  
　　　　bx.optionMove = function (index) { 
　　　　　　 var  bx = this ,tb 
　　　　　　tb = bx.children[ 0 ].children[ 0 ] 
　　　　　　 if (tb.selIndex != null ) 
　　　　　　　　tb.rows[tb.selIndex].style.cssText = ""  
　　　　　　tb.selIndex = Math.min(index,tb.rows.length - 1 ) 
　　　　　　tb.rows[tb.selIndex].style.cssText = " background:#0A246A;color:white "  
　　　　}  
　　　　bx.optionClick = function () { 
　　　　　　 var  bx = this ,tx = bx.previousSibling,sel = tx.previousSibling,tb = bx.children[ 0 ].children[ 0 ] 
　　　　　　sel.selectedIndex = tb.selIndex 
　　　　　　tx.value = sel.options[sel.selectedIndex].text 
　　　　　　bx.innerHTML = ""  
　　　　　　 if (sel.onchange != null ) 
　　　　　　　　sel.onchange() 
　　　　}  
　　}  
　　document.body.attachEvent( " onmousedown " , function () { 
　　　　 if (window.$bxSelectOption != null ) 
　　　　　　window.$bxSelectOption.innerHTML = ""  
　　} ) 
}  
function  selReset(sel) { 
　　 if ( ! document.all) 
　　　　 return  
　　 var  tx = sel.nextSibling 
　　tx.value = sel.options[sel.selectedIndex].text 
}  
</ script >