请教各位:下拉框的问题.

我花了点时间为你写了段代码，希望对你的所帮助！<select name="select" style="width:100" size="8" onmousemove="ShowHint()">
  <option>12345678901234567890</option>
  <option>中华人民共和国</option>
  <option>四川省成都市高新区</option>
  <option>刻骨铭心 测试测试</option>
  <option>测试测试一二三四五六七八九</option>
</select><script language="JavaScript">
  var oPopup = window.createPopup()
  function ShowHint(){
    var oSel = event.srcElement
    var iCount = oSel.options.length
    var iIndex = parseInt(event.offsetY / 15)
    if (iIndex > iCount - 1) iIndex = iCount - 1
    oSel.selectedIndex = iIndex
    sText = oSel.options[oSel.selectedIndex].text
    oPopup.document.body.innerHTML = '<div title="' + sText + '" style="cursor:default">0</div>'
    oPopup.show(event.offsetX+2, event.offsetY+2, 1, 1, event.srcElement)
  }
</script>

解决方案 »

  1.   

    "铭心"学长,辛苦你了!如果以上不指定select的size时,好像就没反应.我主要想显示的是点击select后弹出各个item,当鼠标移动每个item上时的效果.另外如果显示的层能覆盖原来的item(可以看看资源管理器中的效果)就更好!
      

  2.   

    在下拉列表框外观时，在拉出列表后控件就不能接收鼠标事件了，所以上面的方法就不能用了，我也没办法解决。
    SELECT控件的系统优先级太高（相当于一个窗口对象），一般的层是覆盖不了的，只有在层中放入一个IFRAME，再设置IFRAME透明。
    我知道你想要的是什么效果，但是不能接收鼠标事件也没办法了。
      

  3.   

    用select就可以覆盖它自己，主要问题是捕获不到option的onmouseover事件。看看这个：<HTML>
    <HEAD>
    <TITLE> emu </TITLE>
    </HEAD>
    <BODY>
    <span id=titleSpan style="position:absolute;display:none">
    <select style="margin-left:-2;margin-top:-2;margin-bottom:-2;margin-right:-18;background-color:#FFFFEE" id=titleSelect ><option>asdfsdf</select>
    </span><select style="width:70" onmouseover="show()" onmouseout="hide()">
    <option>sdhfdfjytujktyuihgjjh
    <option>asdgdfhfgjfghfghmfgh
    <option>hgkhgjlyuikythdbsdfhh
    <option>4565hrtu467y45yerhty
    </select>
    <SCRIPT LANGUAGE="JavaScript">
    <!--
    function show(){
    var elm = event.srcElement
    var txt=elm.options[elm.selectedIndex].innerText
    titleSelect.options[0].text = txt
    titleSpan.style.display="";
    titleSpan.style.left=event.x
    titleSpan.style.top=event.y
    }
    function hide(){
    titleSpan.style.display="none";
    }
    //-->
    </SCRIPT>
    </BODY>
    </HTML>呵呵，写着玩的。
      

  4.   

    <HTML>
    <HEAD>
    <TITLE> emu </TITLE>
    </HEAD>
    <BODY>
    <span id=titleSpan style="position:absolute;display:none">
    <select style="margin-left:-2;margin-top:-2;margin-bottom:-2;margin-right:-18;background-color:#FFFFEE" id=titleSelect ><option>asdfsdf</select>
    </span>
    <BR><BR><CENTER>emu's test of drop-down's title</CENTER><BR><BR><select style="width:70" onmouseover="show()" onmouseout="hide()" multiple size=12>
    <option>sdhfdfjytujktyuihgjjh
    <option>asdgdfhfgjfghfghmfgh
    <option>hgkhgjlyuikythdbsdfhh
    <option>4565hrtu467y45yerhty
    <option>sdhfdfjytujktyuihgjjh
    <option>asdgdfhfgjfghfghmfgh
    <option>hgkhgjlyuikythdbsdfhh
    <option>4565hrtu467y45yerhty
    <option>sdhfdfjytujktyuihgjjh
    <option>asdgdfhfgjfghfghmfgh
    <option>hgkhgjlyuikythdbsdfhh
    <option>4565hrtu467y45yerhty
    </select>
    <SCRIPT LANGUAGE="JavaScript">
    <!--
    function show(){
    var elm = event.srcElement
    var i = Math.round((event.y-elm.offsetTop-5)/elm.offsetHeight*elm.size);
    if (i>=elm.size) return;
    var txt=elm.options[i].innerText
    titleSelect.options[0].text = txt
    titleSpan.style.display="";
    titleSpan.style.left=elm.offsetLeft;
    titleSpan.style.top=event.y
    }
    function hide(){
    titleSpan.style.display="none";
    }
    //-->
    </SCRIPT>
    </BODY>
    </HTML>
      

  5.   

    http://lucky.myrice.com/temp/select.htm
      

  6.   

    to: net_lover(孟子E章)
    　　孟兄，原来你也在自己做Select呀！其实看起一个小小的select，做起来真的不容易呀！你还做了哪些控件？做得怎么样了？什么时候有空交换一下心得吧！
      

  7.   

    http://lucky.myrice.com/javascriptexam/mengxhselect.htm