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

来源：互联网发布：小米账号破解软件编辑：程序博客网时间：2024/06/14 15:09

原文链接：http://clocker321.blog.163.com/blog/static/6350577200982794537757/

公司项目需要兼容IE8，在一个功能模块中用到了select下拉框并设置了宽度为固定值，在IE8浏览器中打开的的时候，因为option加载的内容长度>下拉框宽度，选择下拉框内容的时候并没有显示完全，如下图：

用了以上方法可完全显示出来，如上右图，zIndex=11;是我自己添加的，在css中是z-index:11,但是在js中就不管用了

详细代码（取自链接）：

<!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 src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script><script type="text/javascript">function FixWidth(selectObj){    var newSelectObj = document.createElement("select");    newSelectObj = selectObj.cloneNode(true);    newSelectObj.selectedIndex = selectObj.selectedIndex;    newSelectObj.id="newSelectObj";      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";        zIndex=11;    }       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);       var newDiv = document.createElement("div");    with (newDiv.style)    {        position = "absolute";        top = (absTop-10) + "px";        left = (absLeft-10) + "px";        width = newSelectObj.offsetWidth+20;        height= newSelectObj.offsetHeight+20;;        background = "transparent";        zIndex=11;    }    document.body.appendChild(newDiv);    newSelectObj.focus();    var enterSel="false";    var enter = function(){enterSel=enterSelect();};    newSelectObj.onmouseover = enter;       var leavDiv="false";    var leave = function(){leavDiv=leaveNewDiv(selectObj, newSelectObj,newDiv,enterSel);};    newDiv.onmouseleave = leave;}function RollbackWidth(selectObj, newSelectObj){    selectObj.selectedIndex = newSelectObj.selectedIndex;    selectObj.style.visibility = "visible";    if(document.getElementById("newSelectObj") != null){       document.body.removeChild(newSelectObj);    }}function removeNewDiv(newDiv){    document.body.removeChild(newDiv);}function enterSelect(){  return "true";}function leaveNewDiv(selectObj, newSelectObj,newDiv,enterSel){ if(enterSel == "true" ){  RollbackWidth(selectObj, newSelectObj);  removeNewDiv(newDiv); }}</script></head><body><form method="post">    <div style="width:100px; height:100px; margin:100px; padding:10px; background:gray;z-index: 10;" >        <select name="Select1" style="width:80px;" onmouseover="FixWidth(this)">            <option id="A" >AAAAAAAAAAAAAAA</option>            <option id="B" >BBBBBBBBBBBBBBB</option>            <option id="C" >CCCCCCCCCCCCCCC</option>        </select>    </div></form></body></html>

还参考了另一种方法，链接：http://blog.csdn.net/itguaicai/article/details/42581021

$(function() {      $(".ProductAttributesSelect").mouseover(function() {          $(this).data("origWidth", $(this).css("width")).css("width", "auto");      }).mouseout(function() {          $(this).css("width", $(this).data("origWidth"));      });  });

这种方式虽然简单便捷，但是在用的时候就会发现鼠标移出select框去选择option时，select框恢复为原来的宽度，并不能进行选择，没有达到预期的目的

阅读全文

0 0