Copy codeThe Code is as follows:
<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>