IE6的option如何实现title功能

ma2jiajia 2010-02-22 03:20:36
RT
<select id="xx00" style="width:150px;">
<option value="1">AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</option>
<option value="2">BBBB</option>
<option value="3">CCC</option>
<option value="4">DD</option>
<option value="5">EEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEE</option>
</select>

除IE6外的浏览器都可以通过<option value="4" title="DD">DD</option>来显示提示
但是IE6不行...
有什么办法可以实现吗??
网上找了些办法,都不好用...
...全文
723 12 打赏 收藏 举报
写回复
12 条回复
切换为时间正序
当前发帖距今超过3年,不再开放新的回复
发表回复
FromEastOcean 2010-02-23
  • 打赏
  • 举报
回复
http://www.walterzorn.com/tooltip/tooltip_e.htm
很简单 开源js
ma2jiajia 2010-02-23
  • 打赏
  • 举报
回复
引用 6 楼 echo123321 的回复:
请参考:

HTML code<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);
}function getWannaValue()
{var SegColl= document.getElementById('segColl');
segCollValue= SegColl.value;
}</script><STYLE>
.smouseOut{
background: document.bgColor;
color: #000000;}
.smouseOver{
background: rgb(0,128,128);
color: #FFFFFF;
cursor: pointer;}</style><selectid='segColl'style='width:35px'class='black'onclick="getWannaValue();opts(this);"><optionvalue='1'title="One....">111</option><optionvalue='2'title="Two....">222</option></select>

我今天也刚好在cnblogs上看到这段代码...
浴火_凤凰 2010-02-23
  • 打赏
  • 举报
回复
还是使用DIV来模拟吧,那样的效果好一些啊
echo123321 2010-02-23
  • 打赏
  • 举报
回复
请参考:



<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);
}
function getWannaValue()
{
var SegColl = document.getElementById('segColl');
segCollValue = SegColl.value;
}

</script>


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


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

</select>

echo123321 2010-02-23
  • 打赏
  • 举报
回复
quot;Two....">222 </option> </select> <br />
我今天也刚好在cnblogs上看到这段代码...
[/Quote]

呵呵,那个也是我。好像用层来做只能这样实现了,另外你不需要测试除了ie6的其它浏览器了,其它的浏览器我们直接return 就可以了。另外滚动条也是支持的。我已经把code放到blog上了。

我这个就是以前用过的功能,正是看到你的提问才想到放到我的随笔里面的,呵呵
ma2jiajia 2010-02-23
  • 打赏
  • 举报
回复
引用 10 楼 fromeastocean 的回复:
http://www.walterzorn.com/tooltip/tooltip_e.htm
很简单 开源js

能给个例子吗??
Tip('xxx')必须配合Untip()才能用是不??
但是option没有onmouseover和onmouseout事件啊...
该如何使用呢??
ma2jiajia 2010-02-22
  • 打赏
  • 举报
回复
那该用什么事件来触发呢??
我看DHTML手册中,option就支持这些事件啊
onlayoutcomplete、onlosecapture、onpropertychange、onreadystatechange、onselectstart、ontimeerror
MuBeiBei 2010-02-22
  • 打赏
  • 举报
回复
如果你要的title值跟你option标签中的值是一样的话~·那你就直接拿到option标签中间那个值就行了~·
孟子E章 2010-02-22
  • 打赏
  • 举报
回复
一个办法是采用div来模仿select实现
PandaIT 2010-02-22
  • 打赏
  • 举报
回复
用自定义属性做吧!

<option value="4" tip="我是熊猫">熊猫</option>

用js读取tip然后自定层显示tip里面的信息!!
相关推荐
发帖
JavaScript

8.7w+

社区成员

Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
帖子事件
创建了帖子
2010-02-22 03:20
社区公告
暂无公告