一开始觉得很简单，只要监听newSelectObj的onmouseover事件，当鼠标离开它的时候，删除newSelectObj就行了，但事实上不是这样的，因为当移动鼠标去选择newSelectObj的option时候，它就认为已经离开了newSelectObj，会马上删除newSelectObj，因此，这样的修改将导致无法选择option。
办法总是能想出来的，经过一上午的多次试验、修改，我终于解决了这个问题，解决方法很简单，增加newSelectObj前，加上一个ｄｉｖ，这个ｄｉｖ刚刚比newSelectObj稍微大一点点，且是透明的（透明让用户无法察觉多加了一个div），ｄｉｖ增加一个鼠标监听事件，当鼠标从ｄｉｖ上移走后，删除newSelectObj、div即可（因为这个ｄｉｖ不比newSelectObj大多少，当鼠标从newSelectObj移走后，基本上会同时离开这个ｄｉｖ）。
而其他人的修改就非常简单了，首先我把这些函数放到一个ｊｓ中，其他人引用这个ｊｓ即可，然后在select组件上增加一个onmouseover事件，调用方法"FixWidth(this)"即可，大大减轻了修改的工作量。
这样一来，效果就好多了。事实上，我并没有自动调整select的宽度，而是创建了一个块头比较大的、新的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>
