固定宽度下拉列表中option内容显示不全问题解决方法

不少时候在页面中为了布局的需要,下拉列表<select>的宽度需要设成比较小的值,这时如果恰巧它包含的选择项<option>的内容比较长,那么超出select宽度的部分将会被截断,如果option显示的内容又比较重要,必须完整地展现出来,或者你是个完美主义者,那这就成了一个不大不小的问题了。

在IE7+、Firefox中,由于支持了<option>的title属性,我们可以想办法给option标记设置title属性(内容可以与显示的值相同或者不同)。如果是已经做好的页面,不想再做太多改动,可以用下面的脚本,自动遍历页面上的所有<select>,给所有的option加上与text相同的title。
function SetOptionTitle()
{
    
var selects = document.getElementsByTagName("select");
    
if (selects.length > 0)
    
{
        
for (var i = 0; i < selects.length; i++)
        
{
            
var options = selects[i].options;
            
if (selects[i].options.length > 0)
            
{
                
for (var j = 0; j < options.length; j++)
                
{
                    
if (options[j].title == "")
                        options[j].title 
= options[j].text;
                }

            }

        }

    }

}
很不幸的是,IE6并不支持<option>的title属性,这一方法在IE6下完全无效!鉴于目前的浏览器市场状况,我们还不得不尽力兼容IE6,所以只能另想其它办法。

我目前想到的办法是:当鼠标悬停到<select>时,创建一个这个下拉列表的副本,同时把焦点移到这个副本上,把副本的样式设成绝对定位,而且盖在原来的下拉列表上,宽度根据option的显示内容自动拉伸,当这个副本失去焦点,或者用户对它进行了选择操作后,获取副本的selectedIndex,赋给原来的select对象。具体代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript">
function FixWidth(selectObj)
{
    
var newSelectObj = document.createElement("select");
    newSelectObj 
= selectObj.cloneNode(true);
    newSelectObj.selectedIndex 
= selectObj.selectedIndex;
    newSelectObj.onmouseover 
= null;
    
    
var e = selectObj;
    
var absTop = e.offsetTop;
    
var absLeft = e.offsetLeft;
    
while(e = e.offsetParent)
    {
        absTop 
+= e.offsetTop;
        absLeft 
+= e.offsetLeft;
    }
    
with (newSelectObj.style)
    {
        position 
= "absolute";
        top 
= absTop + "px";
        left 
= absLeft + "px";
        width 
= "auto";
    }
    
    
var rollback = function(){ RollbackWidth(selectObj, newSelectObj); };
    
if(window.addEventListener)
    {
        newSelectObj.addEventListener(
"blur", rollback, false);
        newSelectObj.addEventListener(
"change", rollback, false);
    }
    
else
    {
        newSelectObj.attachEvent(
"onblur", rollback);
        newSelectObj.attachEvent(
"onchange", rollback);
    }
    
    selectObj.style.visibility 
= "hidden";
    document.body.appendChild(newSelectObj);
    newSelectObj.focus();
}

function RollbackWidth(selectObj, newSelectObj)
{
    selectObj.selectedIndex 
= newSelectObj.selectedIndex;
    selectObj.style.visibility 
= "visible";
    document.body.removeChild(newSelectObj);
}
</script>
</head>

<body>

<form method="post">
    
<div style="width:100px; height:100px; margin:100px; padding:10px; background:gray;">
        
<select name="Select1" style="width:80px;" onmouseover="FixWidth(this)">
            
<option id="A" title="this is A">AAAAAAAAAAAAAAA</option>
            
<option id="B" title="this is B">BBBBBBBBBBBBBBB</option>
            
<option id="C" title="this is C">CCCCCCCCCCCCCCC</option>
        
</select>
    
</div>
</form>

</body>

</html>

有了这个demo,我们就可以把其中的js提取出来,应用到项目中需要的地方了。

目前这种方式是给select注册了onmouseover,对于鼠标操作是没什么问题,如果用户是按tab键移动焦点就无效了。估计实际应用中这样的情形不会很多,所以暂不考虑,有兴趣的朋友可以再完善一下,或者看看有没有更好的解决方法。

 

================================================================

多谢5楼兄弟的提醒,修改了demo,通过attachEvent/addEventListener添加事件后就不会覆盖原有的事件了。

posted @ 2008-05-17 10:55  key_pwd  阅读(11377)  评论(15编辑  收藏  举报