鼠标经过select option 时，能否把option里的内容以提示形式显示出来

1,鼠标经过select option 时，能否把option里的内容以提示形式显示出来
2，水平滚动条能否出现
<select style="width:100px;">
<option >这是一段很长的文字这是一段很长的文字这是一段很长的文字这是一段很长的文字这是一段很长的文字</option>  
<option>2222222222222222222222</option>
</select>  

解决方案 »

  1.   

    option可以加TITLE属性，不过IE6下无效
    IE6下可以使用DIV来模拟与其出现水平滚动条，不如让它用TITLE的形式弹出内容，TITLE会自动换行的IE6下模拟OPTION可看看这里
    http://www.cnblogs.com/wblade/archive/2010/02/23/1671693.html
      

  2.   

    那么多个option选项楼主要想怎么显示呢？
      

  3.   


    <HTML>  
     <HEAD>  
      <TITLE> New Document </TITLE>  
      </HEAD>  
      
     <BODY>  
      <div STYLE='width:200;overflow-x:scroll;border:1px solid red'>  
      <select  name=selectResult align=bottom size=1 STYLE='margin=-2;width:300' multiple >"  
    <option>111111111111111111111111111111111111111</option>  
    <option>222222222222222222222222222222222222222</option>  
    <option>333333333333333333333333333333333333333</option>  
    <option>444444444444444444444444444444444444444</option>  
     <option>111111111111111111111111111111111111111</option>  
    <option>222222222222222222222222222222222222222</option>  
    <option>333333333333333333333333333333333333333</option>  
    <option>444444444444444444444444444444444444444</option> 
    <option>111111111111111111111111111111111111111</option>  
    <option>222222222222222222222222222222222222222</option>  
    <option>333333333333333333333333333333333333333</option>  
    <option>444444444444444444444444444444444444444</option> 
      </select>  
      </div>  
     </BODY>  
      
      
    </HTML>  
    第一条貌似不行吧？？ 用onmouseover不能达到鼠标经过提示的效果
      

  4.   

    (—_—b不是说了，加TITLE属性啊<HTML>  
     <HEAD>  
      <TITLE> New Document </TITLE>  
      <script type="text/javascript" language="javascript">
        window.onload = function() {
          var os = document.getElementsByTagName("SELECT")[0].options;
          for(var i=0; i<os.length; i++) os[i].title = os[i].innerHTML;
        };  </script>
      </HEAD>  
      
     <BODY>  
      <div STYLE='width:200;overflow-x:scroll;border:1px solid red'>  
      <select  name=selectResult align=bottom size=1 STYLE='margin=-2;width:300' multiple >"  
    <option>111111111111111111111111111111111111111</option>  
    <option>222222222222222222222222222222222222222</option>  
    <option>333333333333333333333333333333333333333</option>  
    <option>444444444444444444444444444444444444444</option>  
     <option>111111111111111111111111111111111111111</option>  
    <option>222222222222222222222222222222222222222</option>  
    <option>333333333333333333333333333333333333333</option>  
    <option>444444444444444444444444444444444444444</option> 
    <option>111111111111111111111111111111111111111</option>  
    <option>222222222222222222222222222222222222222</option>  
    <option>333333333333333333333333333333333333333</option>  
    <option>444444444444444444444444444444444444444</option> 
      </select>  
      </div>  
     </BODY>  
      
      
    </HTML>
      

  5.   

    window.onload = function() {
      var os = document.getElementsByTagName("SELECT")[0].options;
      for(var i=0; i<os.length; i++) os[i].title = os[i].innerHTML;
    };
    如果上面的 HTML 代码是后台生成的，那直接
    <option title="4444444444">4444444444</option>
    就不需要再去用js来实现了...
      

  6.   

    最好的方法还是自己用div模拟下拉框吧，很多这种东西，随便一搜。
      

  7.   


    你的这个我试了，IE7,IE8都可以，但在ie6下也行，只是被其他的下拉框给遮住了，请问如何改呢
      

  8.   


    好像是通病，select在css布局就有这个问题，设置psition:absolute;z-index:9999;看看
      

  9.   

    在模拟的DIV层上加一层大小一致，或者稍大一点的iframe
    var oifr = document.createElement("IFRAME");
    oifr.src = "javascript:'&lt;html&gt;&lt;/html&gt;';";
    oifr.scrolling = "no";
    oifr.frameborder = "0";
    oifr.style.cssText = "position:absolute;width:50px;height:120px;top:0px;left:0px;border:none;display:block;"
    document.body.appendChild(oifr);
    用上面的代码创建一个iframe来遮挡其余的SELECT，width、height、top和left和模拟出来的DIV一致
    还有就是，上面这个iframe必须先于DIV添加到文档中，也就是必须先document.body.appendChild(oifr);之后再document.body.appendChild(odiv);上面创建iframe的详细细节可参考
    http://weblogs.asp.net/bleroy/archive/2005/08/09/how-to-put-a-div-over-a-select-in-ie.aspx(这就是做笔记时有保留原出处的好处，顺便强烈BS下那些转贴老是写个转贴，却从来不帖原出处的，更强烈的BS明明是转贴，还说是原创...)