html固定宽度下拉框内容显示不全问题解决方法

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

在IE7+、Firefox中，由于支持了

的title属性，我们可以想办法给option标记设置title属性（内容可以与显示的值相同或者不同）。如果是已经做好的页面，不想再做太多改动，可以用下面的脚本，自动遍历页面上的所有，给所有的option加上与text相同的title。

function SetOptionTitle()
{

//解决兼容性问题

if (navigator.userAgent.toLowerCase().indexOf("firefox") > 0) {
        return;
    }
    if (navigator.userAgent.toLowerCase().indexOf("chrome") > 0) {
        return;
    }
    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并不支持的title属性，这一方法在IE6下完全无效！鉴于目前的浏览器市场状况，我们还不得不尽力兼容IE6，所以只能另想其它办法。

我目前想到的办法是：当鼠标悬停到时，创建一个这个下拉列表的副本，同时把焦点移到这个副本上，把副本的样式设成绝对定位，而且盖在原来的下拉列表上，宽度根据option的显示内容自动拉伸，当这个副本失去焦点，或者用户对它进行了选择操作后，获取副本的selectedIndex，赋给原来的select对象。具体代码如下：

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);
}






    
        
            AAAAAAAAAAAAAAA
            BBBBBBBBBBBBBBB
            CCCCCCCCCCCCCCC
        

    

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

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