IE6、7、8 select下的option无法完全显示的解决方案

在IE6,7,8中，但一个select的option选项很长，但width又被限定的时候，option超过长度的部分无法显示。这个bug改的让人很蛋疼，可恨的IE系列，有这么多bug但是用率仍然很高。经过一天的探索，经过google和自己的反复修改测试，现总结出以下几种解决方案：

1、title法（IE6不支持）

　　利用title属性展示出隐藏的option内容。

　　如下所示：

<html>
<head>
<title>select的option无法完全展现问题</title>
 
<script>
 
function showTitle2(content){
    var obj = document.getElementById("test");
    obj.title = content ;
}
</script>

</head>
<body>
   <select id="test"   onmousemove="showTitle2(this[this.selectedIndex].innerHTML);" style="100px">
            <option >select的option无法完全展现问题</option>
            <option >select的option无法完全展现问题;select的option无法完全展现问题</option>
       </select>
</body>
</html>

2、在原有的select的上方新建一个select。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<script type="text/javascript">


function fixWidth(selectObj)
{
    //创建一个新的select
    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;
    }

    var len = selectObj.options.length ;
    var wid ="80px";
    var text1 ;
    for(var i=0 ; i <len ; i++ ){
        text1 = selectObj.options[i].text ;
        if( fucCheckLength(text1) > 7 ){
            wid = "auto" ;
            break ;
        }
    }
    
    with (newSelectObj.style)
    {
        position = "absolute";
        top = absTop + "px";
        left = absLeft + "px";
        var w =parseInt( width.substring(0,2) );
           width = wid ;
    }

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


function fucCheckLength(strTemp)  
{  
     var i,sum;  
     sum=0;  
     for(i=0;i<strTemp.length;i++)  
     {  
      if ((strTemp.charCodeAt(i)>=0) && (strTemp.charCodeAt(i)<=255))  
       sum=sum+1;  
      else  
       sum=sum+2;  
     }  
     return sum;  
}  

</script>

</head>
<body>
    <form method="post">
        <div style=" 80px; height: 100px; margin: 100px; padding: 10px; background: gray;">
            <select name="select1" id="select1" style=" 80px;" onmouseover="fixWidth(this)">
                <option id="A" title="this is A">AAA</option>
                <option id="B" title="this is B">BBBBB</option>
                <option id="C" title="this is C">中国的地地道道的的淡淡的</option>
            </select>
        </div>
    </form>
</body>
</html>

有一个不足就是在其他代码部分如果对原select进行操作时可能会发生错误，毕竟这里是新建了一个对象。

3、span方法：

这个是最简单也是我认为最好的方法。

<span id="selectDiv"  style="100px;overflow-x:hidden;">
                         <select id="select1">
                             <option >解决ie6中的问题，美工不行，不好意思。</option>
                             <option >假如有一天高速不收费多好啊，假如有一天动车票价和公交车票一样多好啊。</option>
                        </select>
                   </span>

这里的关键在overflow-x:hidden这个设置。查看w3c教程，里面是这样解释的：

overflow-x ： visible | auto | hidden | scroll

visible：不剪切内容也不添加滚动条。假如显式声明此默认值，对象将被剪切为包含对象的window或frame的大小。并且clip属性设置将失效

auto：此为body对象和textarea的默认值。在需要时剪切内容并添加滚动条

hidden：不显示超过对象尺寸的内容

scroll：横向显示滚动条

这里并不限定select的width，那么select会根据option的长度自适应；然后限定外层span的width，那么当select的option长度超过span的width时，因为overflow-x设置为hidden，所以超出的部分就被隐藏了。

最关键的问题解决了，但是还有其它小麻烦：

进箱码头是个select，它的数据源是根据输入的船名动态加载的。当进箱码头外面的span设置为style="100px;overflow-x:hidden;"时，select的width就会根据加载的选项的长度动态调整，当加载的option长度大于100时没问题，但是如果小于100px，那么select的长度就会比标准的100px小，这样看起来就很不美观。解决方法如下：

首先设置select的宽度为固定的100px，然后在select中又添加了两个事件：

onmouseover="fixWidth()" onblur="setWidth()"

对应的方法是：

function fixWidth()
{
    var len = document.getElementById('berth').options.length;
    if( len != 0 ){
        document.getElementById('berth').style.width = "auto";    
    }
}

function setWidth()
{
    document.getElementById('berth').style.width = "100px" ;
}

当鼠标放在select上时就会将select的width设置为auto，这样就可以看到超过长度的部分；而当select失去焦点时，再将width设置为100px，这样就解决了以上问题。

当船名还没有输入时，如果鼠标一不小心滑到了select的上方，这个时候select的宽度就会变成0了，所以在fixWidth方法中要首先判断一下select中是否有option。同时要注意的是onblur事件是不能换成onmouseout的，如果换成此方法，会导致总是无法选中select中的option。

小结：

　　忙活了一天，最终才找到第三种方法，这种方法既简单又适用；如果最早能找到这种方法就不需花这么多时间了，所以说有些小知识点虽然小，但关键时刻却能帮大忙啊！小到知识点积累起来了，就能成为技术上的大牛！