JS under the layer to implement the SELECT Title Hint attribute _ form effects

Copy Code code 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>