加入了对数据太多，增加含有滚动条的支持。。。。把样式的一部分从js里面拿出来设置。这里采用了consatan提供的样式.同时也为了方便使用者自定义自己的样式。
因为只有ie6没有在option 里面支持title属性，所以其他浏览器直接忽略了。（code里面判断了浏览器）
代码
<HTML>
<HEAD>
</HEAD>
<BODY>
<STYLE>
.tbl-container {
position:relative;border:2px solid red;width:100px;overflow:hidden;margin:0px;
font-Family:Verdana, Arial, Helvetica, sans-serif;
}
.smouseOut {
background: document.bgColor;
color: #000000;
}
.smouseOver {
background: rgb(0,128,128);
color: #FFFFFF;
cursor: pointer;
}
.ctl{ table-layout:fixed ;top:0;}
.ctl td{text-overflow:ellipsis;overflow:hidden;white-space: nowrap;padding:2px}
</style>
<SCRIPT language="javascript">
function opts(selectObj){
if(Browser.ie6 == false){
return;
}
var optDivs=document.createElement("div");
optDivs.className="tbl-container";
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.cellSpacing = "0";
objTable.cellPadding = "0";
objTable.className = "ctl";
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 = 0;
left = 0;
border = "1px solid black";
tableLayout="fixed";
wordBreak="break-all";
}
with (optDivs.style){
position = "absolute";
top = (absTop + absHeight) + "px";
left = (absLeft+1) + "px";
tableLayout="fixed";
wordBreak="break-all";
backgroundColor = document.bgColor;
}
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.innerHTML=options[i].innerHTML;
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=1000;
newOptDiv.style.cursor="default";
newOptDiv.style.fontSize = "12px";
objRow.appendChild(newOptDiv);
objTbody.appendChild(objRow);
}
}
objTbody.appendChild(objRow);
objTable.appendChild(objTbody);
optDivs.appendChild(objTable);
document.body.appendChild(optDivs);
if(objTable.offsetHeight > 120){
optDivs.style.height = 120;
optDivs.style.overflowY = "scroll";
}else{
optDivs.style.height = objTable.offsetHeight;
}
var IfrRef = document.createElement("div");
IfrRef.style.position="absolute";
IfrRef.style.width = optDivs.offsetWidth;
IfrRef.style.height = optDivs.offsetHeight;
IfrRef.style.top = optDivs.style.top;
IfrRef.style.left = optDivs.style.left;
IfrRef.style.backgroundColor = document.bgColor;
document.body.appendChild(IfrRef);
optDivs.focus();
optDivs.onblur=function() {choose(selectObj,val,optDivs,IfrRef)};
}
function choose(objselect,val,delobj,delobj2){
objselect.value=val;
document.body.removeChild(delobj);
document.body.removeChild(delobj2);
}
Browser = (function(ua){
var b = {
msie: /msie/.test(ua) && !/opera/.test(ua),
opera: /opera/.test(ua),
safari: /webkit/.test(ua) && !/chrome/.test(ua),
firefox: /firefox/.test(ua),
chrome: /chrome/.test(ua)
};
var vMark = "";
for (var i in b) {
if (b[i]) { vMark = "safari" == i ? "version" : i; break; }
}
b.version = vMark && RegExp("(?:" + vMark + ")[\\/: ]([\\d.]+)").test(ua) ? RegExp.$1 : "0";
b.ie = b.msie;
b.ie6 = b.msie && parseInt(b.version, 10) == 6;
b.ie7 = b.msie && parseInt(b.version, 10) == 7;
b.ie8 = b.msie && parseInt(b.version, 10) == 8;
return b;
})(window.navigator.userAgent.toLowerCase());
</SCRIPT>
sdfsfsdf
<select name='selId' size=1 style= 'width:100px' onclick="opts(this);" >
<option value='111' title="aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa">aaaaaaaaaaaaaaaaaaaaaaaaaaaa</option>
<option value='222' title="bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb">bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</option>
<option value='3333' title="cccccccccccccccccccccccccccccccc">cccccccccccccccccccccccc</option>
<option value='4444' title="aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa">aaaaaaaaaaaaaaaaaaaaaaaaaaaa</option>
<option value='55555' title="bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb">bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</option>
<option value='66666' title="cccccccccccccccccccccccccccccccc">cccccccccccccccccccccccc</option>
<option value='77777' title="aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa">aaaaaaaaaaaaaaaaaaaaaaaaaaaa</option>
<option value='88888' title="bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb">bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</option>
</select>
</BODY>
</HTML>
