当鼠标移动到下拉列表时显示列表内容

有些时候因为下拉列表框宽度受限，所以当选择下拉列表内容时无法看见整个内容，但现在看到一些网站在选择下拉列表内容后，出现了当鼠标移动到下拉列表时，显示选择了的下拉列表的内容，有点像text中title属性的用法，但在下拉列表中好像没有titile属性，不知道这个效果是怎么实现的呀？还请各位大侠指点。

解决方案 »

  1.   

    这是个简单的例子,也可以用div来实现.
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title></title>
    <script type="text/javascript">
    var popwin = window.createPopup();
    popwin.document.write("<html><head></head><body style='margin:0;overflow:hidden;' ></body></html>");
    function sover()
    {
    var s = event.srcElement;
    popwin.document.body.innerHTML = s.options[s.selectedIndex].text;
    popwin.show(20, 15, 100, 85, s);
    }
    function sout()
    {
    popwin.hide();
    }
    </script></head>
    <body>
    <form>
    <select id=se onmouseover="sover()" onmouseout="sout()">
    <option value="1">11</option>
    <option value="2">22</option>
    <option value="3">33</option>
    </select>
    </form>
    </body>
    </html>
      

  2.   

    这样做就没有边框了。
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title></title>
    <script type="text/javascript">
    var popwin = window.createPopup();
    //popwin.document.write("<html><head></head><body style='margin:0;overflow:hidden;' ></body></html>");
    function sover()
    {
    var s = event.srcElement;
    popwin.document.body.innerHTML = s.options[s.selectedIndex].text;
    popwin.show(20, 15, 100, 85, s);
    }
    function sout()
    {
    popwin.hide();
    }
    </script></head>
    <body>
    <form>
    <select id=se onmouseover="sover()" onmouseout="sout()">
    <option value="1">11</option>
    <option value="2">22</option>
    <option value="3">33</option>
    </select>
    </form>
    </body>
    </html>