下拉菜单选项内容过长的问题

[yugang1219]

我的下拉菜单选项内容过长,我想做成将鼠标放在选项上面的时候把这条选项的全部内容显示出来,应该怎么做呢?

[yugang1219]

没人回答?自己顶

[lstup]

这好象不可以吧。

[yugang1219]

不可以吗?鼠标放在上面用title的形式把内容完全显示出来

[scoutlin]

http://blog.csdn.net/scoutlin/archive/2005/02/22/297701.aspx

[yugang1219]

我想的是下拉菜单打开的时候鼠标放在选项上时显示选项的全部内容,楼上的大哥给的例子虽好,但是还是不行

[zhangjin0997]

把它分类然后用下拉框联动的方法解决吗！

[yugang1219]

不是这个意思,我是说选项的值太长,各个选项不是那种关联的

[yugang1219]

下拉菜单的option是不是不支持onmouseover?

[scoutlin]

改得比较匆忙
你自己再修改一下

<div>
<input readonly style="width:120" name=mselect onmouseover="showt(this)" onmouseout="hideTitle(this)"><input type=button value="6" style="font-family:webdings;font-size:9px" onclick="droplist(this)">
</div>
<div id=div1 style="display:none;overflow:auto;height:expression(5*15);width:expression(document.all.mselect.offsetWidth+18);">
<select name=s1 size=6 style="width:expression(document.all.mselect.offsetWidth);" onmousemove="showTitle(this);" onmouseout="hideTitle(this);" onclick="schange(this);">
<option>aaaaaaaaaaaaaaaaaaaaaa1
<option>bbbbbbbbbbbbbbbbbbbbbbbbb1
<option>cccccccccccccccccccccccc1
<option>ddddddddddddddddddddddd1
<option>eeeeeeeeeeeeeeeeeeeeeee1
<option>fffffffffffffffffffffffffff1
</select>
</div>
<script>
document.all.mselect.value=document.all.s1.options[0].text

//定义Popup
var oP=window.createPopup();
oP.document.body.style.background="beige";
//popup是否已显示
var oPShow=0;
function showTitle(obj){
var h=event.offsetY;
var fontsize=(obj.style.fontSize==""?(obj.currentStyle.fontSize==""?"9":obj.currentStyle.fontSize):obj.style.fontSize);
fontsize=parseInt(fontsize)*1.6;
var l=parseInt(h/fontsize);
oP.document.body.innerText=obj.options[l].text;
len=obj.options[l].text.length*8;
oP.show(event.offsetX+20,event.offsetY+fontsize+5,len,fontsize,document.body);
oPShow=1;
}
function hideTitle(obj){
if(oPShow==1)oP.hide();
}
function showt(obj){
oP.document.body.innerText=obj.value
var len=obj.value.length*8;
oP.show(event.offsetX+20,event.offsetY+20,len,15,document.body);
oPShow=1;
}
function schange(obj){
document.all.mselect.value=obj.options[obj.selectedIndex].text;
obj.parentElement.style.display='none';
}
function droplist(obj)
{
event.cancelBubble=true
div1.style.top=document.all.mselect.getBoundingClientRect().top;
div1.style.left=document.all.mselect.getBoundingClientRect().left;
div1.style.display=''
document.all.mselect.focus();
}
document.body.onclick=function(){
div1.style.display='none'
}
</script>