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="width: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="width: 80px; height: 100px; margin: 100px; padding: 10px; background: gray;"> <select name="select1" id="select1" style="width: 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="width: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="width: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。
小结：
忙活了一天，最终才找到第三种方法，这种方法既简单又适用；如果最早能找到这种方法就不需花这么多时间了，所以说有些小知识点虽然小，但关键时刻却能帮大忙啊！小到知识点积累起来了，就能成为技术上的大牛！
