复制代码 代码如下:
<script>
function opts(selectObj){
var optDivs=document.createElement("div");
var objTable=document.createElement("table");
var objTbody=document.createElement("tbody");
optDivs.style.zIndex = "100";
objTable.style.zIndex = "100";
objTable.width=selectObj.style.width;
objTable.border = "0";
objTable.cellPadding = "0";
objTable.cellSpacing = "0";
objTable.style.paddingLeft = "2";
objTable.style.fontFamily = "Verdana, Arial, Helvetica, sans-serif";

var e = selectObj;
var absTop = e.offsetTop;
var absLeft = e.offsetLeft;
var absWidth = e.offsetWidth;
var absHeight = e.offsetHeight;

while(e = e.offsetParent){
absTop += (e.offsetTop+0.3);
absLeft += e.offsetLeft;
}

with (objTable.style){
position = "absolute";
top = (absTop + absHeight) + "px";
left = (absLeft+1) + "px";
border = "1px solid black";
tableLayout="fixed";
wordBreak="break-all";
}

var options = selectObj.options;
var val=selectObj.value;

if (options.length > 0){
for (var i = 0; i < options.length; i++){
var newOptDiv = document.createElement("td");
var objRow=document.createElement("tr");
newOptDiv.name=options[i].value;
newOptDiv.innerText=options[i].innerText;
newOptDiv.title=options[i].title;
newOptDiv.onmouseout = function() {this.className='smouseOut';val=selectObj.value};
newOptDiv.onmouseover = function() {this.className='smouseOver';val=this.name;};
newOptDiv.className="smouseOut";
newOptDiv.style.width=40;
newOptDiv.style.cursor="default";
newOptDiv.style.fontSize = "11px";
newOptDiv.style.fontFamily = "Verdana, Arial, Helvetica, sans-serif";

objRow.appendChild(newOptDiv);
objTbody.appendChild(objRow);
}
}


objTbody.appendChild(objRow);
objTable.appendChild(objTbody);
optDivs.appendChild(objTable);
document.body.appendChild(optDivs);

var IfrRef = document.createElement("div");
IfrRef.style.position="absolute";
IfrRef.style.width = objTable.offsetWidth;
IfrRef.style.height = objTable.offsetHeight;
IfrRef.style.top = objTable.style.top;
IfrRef.style.left = objTable.style.left;
IfrRef.style.backgroundColor = document.bgColor;
document.body.appendChild(IfrRef);

objTable.focus();
objTable.onblur=function() {choose(selectObj,val,optDivs,IfrRef)};
}

function choose(objselect,val,delobj,delobj2){
objselect.value=val;
document.body.removeChild(delobj);
document.body.removeChild(delobj2);
}

</script>


<STYLE>
.smouseOut {
background: document.bgColor;
color: #000000;
}
.smouseOver {
background: rgb(0,128,128);
color: #FFFFFF;
cursor: pointer;
}
</style>


<select id='selId'style='width:50px' class='black' onclick="opts(this);">
<option value='1' title="One....">111</option>
<option value='2' title="Two....">222</option>

</select>