select的标签<option/>过长的问题

如果html页面的select标签过长。过长的部分会显示不出来，有没有把法可以把过长的部分给显示出来？<option> 上可以用mouse的相关属性吗？比如：鼠标放在option上，然后显示整个option的内容？有相关的例子发下。谢谢~js菜鸟求指教~~

解决方案 »

  1.   

    恩。但是IE6不支持title属性啊。。所以。。有没有别的办法
      

  2.   

    定义一个浮动层，给select添加onmouseover事件,在浮动层上显示option内容 
    Java 技术交流群：58156559
      

  3.   

    JQUERY框架里有个专做tip(类似title)的插件。你可以试试
      

  4.   

    好像要求jqery1.3.2.我们用的版本比较低~~1.2.x..有没有别的办法。。
      

  5.   

    select下拉列表的option里好像用不了onmouseover事件..
      

  6.   


    <HTML>
    <HEAD>
    <STYLE>
    .tbl-container {
      position:relative; width:100px;overflow:hidden;margin:0px;
      font-Family:Verdana, Arial, Helvetica, sans-serif;
    }
    .smouseOut {
      background: document.bgColor;
      color: #000000;
    }
    .smouseOver {background:#0D60B3; color: #FFFFFF; cursor: pointer; }
    .ctl{ table-layout:fixed ;top:0;}
    .ctl td{text-overflow:ellipsis;overflow:hidden;white-space: nowrap;padding:2px}
    </style>
    <SCRIPT language="javascript">      
    function opts(selectObj){
      if(Browser.ie6 == false){return; }
      var optDivs=document.createElement("div");
      optDivs.className="tbl-container";
      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.cellSpacing = "0";
      objTable.cellPadding = "0";
      objTable.className = "ctl";     
      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 = 0;
        left = 0;
        border = "1px solid black";
        tableLayout="fixed";
        wordBreak="break-all";
      }
                            
      with (optDivs.style){
        position = "absolute";
        top = (absTop + absHeight) + "px";
        left = (absLeft+1) + "px";
        tableLayout="fixed";
        wordBreak="break-all";
        backgroundColor = document.bgColor;
      }
      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.innerHTML=options[i].innerHTML;
          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=1000;
          newOptDiv.style.cursor="default";
          newOptDiv.style.fontSize = "12px";
                                        
          objRow.appendChild(newOptDiv);
          objTbody.appendChild(objRow);
        }
      }
                         
      objTbody.appendChild(objRow);
      objTable.appendChild(objTbody);
      optDivs.appendChild(objTable);
      document.body.appendChild(optDivs);
                                
      if(objTable.offsetHeight > 120){
        optDivs.style.height = 120;
        optDivs.style.overflowY = "scroll";
      }else{
       optDivs.style.height = objTable.offsetHeight;
      }
                                
      var IfrRef = document.createElement("div");
      IfrRef.style.position="absolute";
      IfrRef.style.width = optDivs.offsetWidth;
      IfrRef.style.height = optDivs.offsetHeight;
      IfrRef.style.top = optDivs.style.top;
      IfrRef.style.left = optDivs.style.left;
      IfrRef.style.backgroundColor = document.bgColor;
      document.body.appendChild(IfrRef);
                            
      optDivs.focus();
      optDivs.onblur=function() {choose(selectObj,val,optDivs,IfrRef)};
    }function choose(objselect,val,delobj,delobj2){
      objselect.value=val;
      document.body.removeChild(delobj);
      document.body.removeChild(delobj2);
    }
              
    Browser=(function(ua){
      var b={
        msie: /msie/.test(ua) && !/opera/.test(ua),
        opera: /opera/.test(ua),
        safari: /webkit/.test(ua) && !/chrome/.test(ua),
        firefox: /firefox/.test(ua),
        chrome: /chrome/.test(ua)
      };
      var vMark = "";
      for (var i in b) {
        if (b[i]) { vMark = "safari" == i ? "version" : i; break; }
      }
      b.version = vMark && RegExp("(?:" + vMark + ")[\\/: ]([\\d.]+)").test(ua) ? RegExp.$1 : "0";
      b.ie = b.msie;
      b.ie6 = b.msie && parseInt(b.version, 10) == 6;
      b.ie7 = b.msie && parseInt(b.version, 10) == 7;
      b.ie8 = b.msie && parseInt(b.version, 10) == 8;
      return b;
    })(window.navigator.userAgent.toLowerCase());
    </SCRIPT>
    </HEAD>
    <BODY>  <select name='selId' size=1   style= 'width:100px' onclick="opts(this);" >
      <option value='0' title="000000000000000000000000000000000000">000000000000000000000000000000000000</option>
      <option value='1' title="111111111111111111111111111111111111111">111111111111111111111111111111111111111</option>
      <option value='2' title="222222222">222222222</option>
    </select>
    </BODY>
    </HTML>
      

  7.   

    safari,chrome 下是不支持select-options的title属性的，即便支持，也不好看，建议采取其他的显示方式
      

  8.   

    http://download.csdn.net/source/3196205  我想这个应该对你有所帮助