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

最新推荐文章于 2024-05-20 11:10:46 发布

jianhua0902

最新推荐文章于 2024-05-20 11:10:46 发布

阅读量4.5k

点赞数

分类专栏： WEB开发文章标签： function xhtml div html null 工作

WEB开发专栏收录该内容

22 篇文章 0 订阅

订阅专栏

动态显示，在鼠标点中后显示完整的列表，离开后显示缩略的列表。

公司项目中，很多页面都用到了select组件模拟树状选择框，由于树的层次可能非常多，因此<option>的选择项内容非常长，而超出固定长度的部分被截断，无法完全看清，导致用户体验比较差，因此，要求统一修改。

　　但是，树层次并非固定，而是允许用户自定义，所以组件宽度不能是定长。如果定义的长度不是足够长，而用户定义的树层次很多，仍然无法完全看清；如果定义长度足够长，但用户定义树层次比较少，反而页面不美观。

　　想起网络上牛人比比皆是，他们一定碰到过类似的情况，于是上网搜了一下，果然被我找到了，但这个例子有个小问题，就是鼠标离开那个select框后，不能自动收回宽度；必须在页面上其他地方，点击鼠标或者选择下拉框后，才能做自动收回，还是有点美中不足，呵呵。

　　一开始觉得很简单，只要监听newSelectObj的onmouseover事件，当鼠标离开它的时候，删除newSelectObj就行了，但事实上不是这样的，因为当移动鼠标去选择newSelectObj的option时候，它就认为已经离开了newSelectObj，会马上删除 newSelectObj，因此，这样的修改将导致无法选择option。

　　办法总是能想出来的，经过一上午的多次试验、修改，我终于解决了这个问题，解决方法很简单，增加newSelectObj前，加上一个ｄｉｖ，这个ｄｉｖ刚刚比newSelectObj稍微大一点点，且是透明的（透明让用户无法察觉多加了一个div），ｄｉｖ增加一个鼠标监听事件，当鼠标从ｄｉｖ上移走后，删除newSelectObj、div即可（因为这个ｄｉｖ不比newSelectObj大多少，当鼠标从newSelectObj移走后，基本上会同时离开这个ｄｉｖ）。

　　而其他人的修改就非常简单了，首先我把这些函数放到一个ｊｓ中，其他人引用这个ｊｓ即可，然后在select组件上增加一个onmouseover事件，调用方法"FixWidth(this)"即可，大大减轻了修改的工作量。

　　这样一来，效果就好多了。事实上，我并没有自动调整select的宽度，而是创建了一个块头比较大的、新的select，我们的眼睛只是被善意地欺骗了，适当的善意欺骗确实是好的，哈哈

效果如下：

1、页面初始化效果

2、鼠标移到select上的效果

3、点击select效果

详细代码如下：

<!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)
{
    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">BBBBBBBBBBBBBBB</option>
            <option id="C" title="this is C">CCCCCCCCCCCCCCC</option>
        </select>
    </div>
</form>

</body>

</html>

jianhua0902

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
固定宽度下拉列表中option内容显示不全问题解决方法

动态显示，在鼠标点中后显示完整的列表，离开后显示缩略的列表。公司项目中，很多页面都用到了select组件模拟树状选择框，由于树的层次可能非常多，因此的选择项内容非常长，而超出固定长度的部分被截断，无法完全看清，导致用户体验比较差，因此，要求统一修改。　　但是，树层次并非固定，而是允许用户自定义，所以组件宽度不能是定长。如果定义的长度不是足够长，而用户定义的
复制链接

扫一扫

专栏目录