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 值长度大于设定的长度，鼠标滑过就会自动伸长（这部分现在是可以的），如果小于固定的长度鼠标滑过长度不变（这部分未解决）。