不少时候在页面中为了布局的需要,下拉列表的宽度需要设成比较小的值,这时如果恰巧它包含的选择项的内容比较长,那么超出select宽度的部分将会被截断,如果option显示的内容又比较重要,必须完整地展现出来,或者你是个完美主义者,那这就成了一个不大不小的问题了。
在IE7+、Firefox中,由于支持了的title属性,我们可以想办法给option标记设置title属性(内容可以与显示的值相同或者不同)。如果是已经做好的页面,不想再做太多改动,可以用下面的脚本,自动遍历页面上的所有,给所有的option加上与text相同的title。
functionSetOptionTitle()
{
varselects=document.getElementsByTagName("select");
if(selects.length>0)
{
for(vari=0; i
{
varoptions=selects[i].options;
if(selects[i].options.length>0)
{
for(varj=0; j
{
if(options[j].title=="")
options[j].title=options[j].text;
} } } }}
很不幸的是,IE6并不支持的title属性,这一方法在IE6下完全无效!鉴于目前的浏览器市场状况,我们还不得不尽力兼容IE6,所以只能另想其它办法。
我目前想到的办法是:当鼠标悬停到时,创建一个这个下拉列表的副本,同时把焦点移到这个副本上,把副本的样式设成绝对定位,而且盖在原来的下拉列表上,宽度根据option的显示内容自动拉伸,当这个副本失去焦点,或者用户对它进行了选择操作后,获取副本的selectedIndex,赋给原来的select对象。具体代码如下:
html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">functionFixWidth(selectObj)
{varnewSelectObj=document.createElement("select");
newSelectObj=selectObj.cloneNode(true);
newSelectObj.selectedIndex=selectObj.selectedIndex;
newSelectObj.οnmοuseοver=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);
}
AAAAAAAAAAAAAAABBBBBBBBBBBBBBBCCCCCCCCCCCCCCC