IE6的option如何实现title功能

Question

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不行...
有什么办法可以实现吗？？
网上找了些办法，都不好用...

Answer 1

用自定义属性做吧！<option value="4" tip="我是熊猫">熊猫</option>用js读取tip然后自定层显示tip里面的信息！！

Answer 2

一个办法是采用div来模仿select实现

Answer 3

如果你要的title值跟你option标签中的值是一样的话~·那你就直接拿到option标签中间那个值就行了~·

Answer 4

那该用什么事件来触发呢？？
我看DHTML手册中，option就支持这些事件啊
onlayoutcomplete、onlosecapture、onpropertychange、onreadystatechange、onselectstart、ontimeerror

Answer 5

请参考:<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>

Answer 6

还是使用DIV来模拟吧，那样的效果好一些啊

Answer 7

我今天也刚好在cnblogs上看到这段代码...

Answer 8

http://www.walterzorn.com/tooltip/tooltip_e.htm 
很简单 开源js

Answer 9

能给个例子吗？？
Tip('xxx')必须配合Untip()才能用是不？？
但是option没有onmouseover和onmouseout事件啊...
该如何使用呢？？

Answer 10

quot;Two....&quot;&gt;222 &lt;/option&gt; &lt;/select&gt; <br />
 我今天也刚好在cnblogs上看到这段代码...
[/Quote]呵呵，那个也是我。好像用层来做只能这样实现了，另外你不需要测试除了ie6的其它浏览器了，其它的浏览器我们直接return 就可以了。另外滚动条也是支持的。我已经把code放到blog上了。我这个就是以前用过的功能，正是看到你的提问才想到放到我的随笔里面的，呵呵