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 type="text/javascript">
function FixWidth(selectObj){
var newSelectObj = document.createElement("select");
newSelectObj = selectObj.cloneNode(true);
newSelectObj.setAttribute("ID", "aa");
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;
}
var widthTemp = "";
//if(absLeft >= 200px){
// widthTemp ="";
// }else{
// widthTemp = 200px;
// }
with (newSelectObj.style){
position = "absolute";
top = absTop + "px";
left = absLeft + "px";
width = widthTemp;
}
var rollback = function(){ RollbackWidth(selectObj, newSelectObj); };
newSelectObj.onmouseout= rollback;//新增加的事件，解决一处BUG
newSelectObj.focus();
newSelectObj.onfocus = function(){ newSelectObj.onmouseout=null; };//新增加的事件，解决BUG
newSelectObj.onblur = rollback;
newSelectObj.onchange = rollback;
selectObj.style.visibility = "hidden";
document.body.appendChild(newSelectObj);
}
function RollbackWidth(selectObj, newSelectObj){
selectObj.selectedIndex = newSelectObj.selectedIndex;
selectObj.style.visibility = "visible";
document.body.removeChild(newSelectObj);
}
</script>
</head><body><form method="post">
        <select name="Select1" style="width:200px;" onmouseover="FixWidth(this)">
            <option id="C" title="this is C">CCC发送</option>
       
    </div>
</form></body></html>
上面是我写的一段代码，可以实现鼠标移动到上面自动伸长，但是如果option 值小于固定长度就会变短。我现在想让它不变短，请各位大大帮帮忙了。也就是说如果option 值长度大于设定的长度，鼠标滑过就会自动伸长（这部分现在是可以的），如果小于固定的长度鼠标滑过长度不变（这部分未解决）。

解决方案 »

  1.   

    那就不要select控件了，自己写一个div控件。
      

  2.   

    使用DIV模拟 下拉框吧！
    这个比较好控制！
      

  3.   

    <!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" />
    <META NAME="修改完成" CONTENT="theforever(碧海情天,断水寒刀),赵亮">
    <meta http-equiv="Email" content="theforever·１６３。com">
    <meta http-equiv="Blog" content="blog·csdn·net/theforever">
    <title>theforever_碧海情天_修改_自动调整宽度并有最小宽度的SELECT</title>
    <script type="text/javascript">
    function FixWidth(selectObj) {
    var newSelectObj = document.createElement("select");
    newSelectObj = selectObj.cloneNode(true);
    newSelectObj.setAttribute("id", "theforever_csdn");
    newSelectObj.selectedIndex = selectObj.selectedIndex;
    newSelectObj.onmouseover = null;
    var e = selectObj;
    var absTop = e.offsetTop, 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 = "";
    }
    var rollback = function() {
    RollbackWidth(selectObj, newSelectObj);
    };
    newSelectObj.onmouseout = rollback; //新增加的事件，解决一处BUG
    newSelectObj.focus();
    newSelectObj.onfocus = function() {
    newSelectObj.onmouseout = null;
    }; //新增加的事件，解决BUG
    newSelectObj.onblur = rollback;
    newSelectObj.onchange = rollback;
    selectObj.style.visibility = "hidden";
    document.body.appendChild(newSelectObj);
    if(newSelectObj.clientWidth<200) newSelectObj.style.width="200px";
    }
    function RollbackWidth(selectObj, newSelectObj) {
    selectObj.selectedIndex = newSelectObj.selectedIndex;
    selectObj.style.visibility = "visible";
    document.body.removeChild(newSelectObj);
    }
    </script>
    </head>
    <body>
    <form method="post">
            <select name="Select1" style="width:200px;" onmouseover="FixWidth(this)">
                <option id="C" title="this is C">CCC发送CCCCC发送</option>
                <option id="D" title="this is D">ddd送ddd送dd</option>
        </div>
    </form>
    </body>
    </html>