高分求JS动态的改变select的宽和高.!!!!!!!!!!!!!

有一个下拉框,本来的它的宽是100,但是里边有15个字,所以肯定显示不全,我想在它获得焦点的时候让它根据里边的字数自动的增加宽度,失去焦点的时候又变回原来的宽度.高手帮忙... 有一个下拉框,本来的它的宽是100,但是里边有15个字,所以肯定显示不全,我想在它获得焦点的时候让它根据里边的字数自动的增加宽度,失去焦点的时候又变回原来的宽度.
高手帮忙....
QQ251215701 展开

 我来答

1个回答

#热议# 不吃早饭真的会得胆结石吗？

百度网友69ecb6b
2010-03-28 · TA获得超过874个赞

知道小有建树答主

回答量：180

采纳率：0%

帮助的人：67.5万

我也去答题访问个人页

关注

展开全部

<!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)
{

if (navigator.userAgent.toLowerCase().indexOf("firefox") > 0) {
return;
}

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>

参考资料： http://learning.javaeye.com/blog/579409

本回答由提问者推荐

已赞过 已踩过<

评论收起

推荐律师服务：若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询

高分求JS动态的改变select的宽和高.!!!!!!!!!!!!!

其他类似问题

为你推荐：