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

Html 专栏收录该内容
8 篇文章 0 订阅

原文链接: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;" οnmοuseοver="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
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值