html固定宽度下拉框内容显示不全问题解决方法

wenlongsust

浏览: 66190 次
性别:
来自: 西安

最近访客更多访客>>

AnonymMan

smile_wangchun

shmily2038

liuwuhui

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (150)

社区版块

存档分类

不少时候在页面中为了布局的需要，下拉列表<select>的宽度需要设成比较小的值，这时如果恰巧它包含的选择项<option>的内容比较长，那么超出select宽度的部分将会被截断，如果option显示的内容又比较重要，必须完整地展现出来，或者你是个完美主义者，那这就成了一个不大不小的问题了。

在IE7+、Firefox中，由于支持了<option>的title属性，我们可以想办法给option标记设置title属性（内容可以与显示的值相同或者不同）。如果是已经做好的页面，不想再做太多改动，可以用下面的脚本，自动遍历页面上的所有<select>，给所有的option加上与text相同的title。

functionSetOptionTitle()

{

varselects=document.getElementsByTagName("select");

if(selects.length>0)

{

for(vari=0;i<selects.length;i++)

{

varoptions=selects[i].options;

if(selects[i].options.length>0)

{

for(varj=0;j<options.length;j++)

{

if(options[j].title=="")

options[j].title=options[j].text;

}

很不幸的是，IE6并不支持<option>的title属性，这一方法在IE6下完全无效！鉴于目前的浏览器市场状况，我们还不得不尽力兼容IE6，所以只能另想其它办法。

我目前想到的办法是：当鼠标悬停到<select>时，创建一个这个下拉列表的副本，同时把焦点移到这个副本上，把副本的样式设成绝对定位，而且盖在原来的下拉列表上，宽度根据option的显示内容自动拉伸，当这个副本失去焦点，或者用户对它进行了选择操作后，获取副本的selectedIndex，赋给原来的select对象。具体代码如下：

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">

<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title></title>
<scripttype="text/javascript">
functionFixWidth(selectObj)

{
varnewSelectObj=document.createElement("select");

newSelectObj=selectObj.cloneNode(true);

newSelectObj.selectedIndex=selectObj.selectedIndex;

newSelectObj.onmouseover=null;

vare=selectObj;
varabsTop=e.offsetTop;
varabsLeft=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";

}

varrollback=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);

newSelectObj.focus();

}

functionRollbackWidth(selectObj,newSelectObj)

{

selectObj.selectedIndex=newSelectObj.selectedIndex;

selectObj.style.visibility="visible";

document.body.removeChild(newSelectObj);

}
</script>
</head>

<body>

<formmethod="post">
<divstyle="width:100px;height:100px;margin:100px;padding:10px;background:gray;">
<selectname="Select1"style="width:80px;"onmouseover="FixWidth(this)">
<optionid="A"title="thisisA">AAAAAAAAAAAAAAA</option>
<optionid="B"title="thisisB">BBBBBBBBBBBBBBB</option>
<optionid="C"title="thisisC">CCCCCCCCCCCCCCC</option>
</select>
</div>
</form>

</body>

</html>

有了这个demo，我们就可以把其中的js提取出来，应用到项目中需要的地方了。

目前这种方式是给select注册了onmouseover，对于鼠标操作是没什么问题，如果用户是按tab键移动焦点就无效了。估计实际应用中这样的情形不会很多，所以暂不考虑，有兴趣的朋友可以再完善一下，或者看看有没有更好的解决方法。

转自：http://www.cnblogs.com/key/archive/2008/05/17/1201274.html

分享到：