jsp页面上有一个select标签,标签的宽度是固定不变的,select中的内容超过了select的宽度。问题:
在标签宽度不变的情况下,展开select,其中的内容按实际长度显示。越简单越好!

解决方案 »

  1.   

    如果非要实现的话 应该用css+div来实现
    不过不像你说的那么简单
      

  2.   

    让select显示的内容用程序先处理好换行。不知道行不?
      

  3.   

    demo,通过焦点事件覆盖原来的select。
    复制下面代码到文本文档里,改后缀为html,运行就可以看到效果了。<!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.onmouseover = null;
        
        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);
        newSelectObj.focus();
    }function RollbackWidth(selectObj, newSelectObj)
    {
        selectObj.selectedIndex = newSelectObj.selectedIndex;
        selectObj.style.visibility = "visible";
        document.body.removeChild(newSelectObj);
    }
    </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>
      

  4.   

    css+div整吧.!  参考下4L的
      

  5.   

    通过焦点事件覆盖原来的select。