js下用层来实现select的title提示属性
作者:
用层来实现select的title 提示属性
复制代码 代码如下:
<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>
您可能感兴趣的文章:
- js实现动画特效的文字链接鼠标悬停提示的方法
- jQuery悬停文字提示框插件jquery.tooltipster.js用法示例【附demo源码下载】
- js 文字超出长度用省略号代替,鼠标悬停并以悬浮框显示实例
- js实现鼠标悬停图片上时滚动文字说明的方法
- js实现文字垂直滚动和鼠标悬停效果
- 基于JS代码实现当鼠标悬停表格上显示这一格的全部内容
- Javascript仿新浪游戏频道鼠标悬停显示子菜单效果
- CSS或者JS实现鼠标悬停显示另一元素
- JS实现title标题栏文字不间断滚动显示效果
- js鼠标移动在title中显示图片的效果代码
- 一个JS函数搞定网页标题(title)闪动效果
- JS实现TITLE悬停长久显示效果完整示例