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

最新推荐文章于 2023-12-27 09:36:22 发布

原创最新推荐文章于 2023-12-27 09:36:22 发布 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #xhtml #ViewUI

本文提供了一个JavaScript解决方案，用于解决IE6、7、8浏览器中select元素的option内容被截断的问题。通过创建一个绝对定位的新select元素并动态调整其位置和大小，确保不同长度的选项文本能够正确显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

select固定，但是option里的内容可能很长，在IE9下，option里的内容会被拉长变大，这个正常。

但是在IE6,7,8下，option里的内容都与select的宽度一直，对于的内容都被截断了。

现在有个解决办法，虽不能和IE9一模一样，但是相比效果还是差不多的。

<!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 type="text/javascript">
function FixWidth(selectObj)
{
if (navigator.userAgent.toLowerCase().indexOf("firefox") > 0) {
        return;
    }

    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";
    }
   
    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";
        //background = "green";
    }
    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;" >
        <select name="Select1" style="width:80px;" onmouseover="FixWidth(this)">
            <option id="A" title="this is A">AAAAAAAAAAAAAAA</option>
            <option id="B" title="this is B">BBBBBBBBBBBBBBBssssssssssssssssss</option>
            <option id="C" title="this is C">CCCCCCCCCCCCCCC</option>
        </select>
    </div>
</form>
</body>
</html>

内容转自：http://learning.iteye.com/blog/579409