固定宽度下拉列表中option内容显示不全问题解决方法
<!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>
?
