不少时候在页面中为了布局的需要，下拉列表<select>的宽度需要设成比较小的值，这时如果恰巧它包含的选择项<option>的内容比较长，那么超出select宽度的部分将会被截断，如果option显示的内容又比较重要，必须完整地展现出来，或者你是个完美主义者，那这就成了一个不大不小的问题了。
在IE7+、Firefox中，由于支持了<option>的title属性，我们可以想办法给option标记设置title属性（内容可以与显示的值相同或者不同）。如果是已经做好的页面，不想再做太多改动，可以用下面的脚本，自动遍历页面上的所有<select>，给所有的option加上与text相同的title。
function
SetOptionTitle()
{
var selects = document.getElementsByTagName("select");
if (selects.length > 0)
{
for (var i = 0; i < selects.length; i++)
{
var options = selects[i].options;
if (selects[i].options.length > 0)
{
for (var j = 0; j < options.length; j++)
{
if (options[j].title == "")
options[j].title = options[j].text;
}
}
}
}
}
很不幸的是，IE6并不支持<option>的title属性，这一方法在IE6下完全无效！鉴于目前的浏览器市场状况，我们还不得不尽力兼容IE6，所以只能另想其它办法。
我目前想到的办法是：当鼠标悬停到<select>时，创建一个这个下拉列表的副本，同时把焦点移到这个副本上，把副本的样式设成绝对定位，而且盖在原来的下拉列表上，宽度根据option的显示内容自动拉伸，当这个副本失去焦点，或者用户对它进行了选择操作后，获取副本的selectedIndex，赋给原来的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.onmouseover = null ;
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);
newSelectObj.focus();
}
function RollbackWidth(selectObj, newSelectObj)
{
selectObj.selectedIndex = newSelectObj.selectedIndex;
selectObj.style.visibility = " visible " ;
document.body.removeChild(newSelectObj);
}
</ 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 >
在IE7+、Firefox中，由于支持了<option>的title属性，我们可以想办法给option标记设置title属性（内容可以与显示的值相同或者不同）。如果是已经做好的页面，不想再做太多改动，可以用下面的脚本，自动遍历页面上的所有<select>，给所有的option加上与text相同的title。
function
SetOptionTitle()
{ var selects = document.getElementsByTagName("select"); if (selects.length > 0) { for (var i = 0; i < selects.length; i++) { var options = selects[i].options; if (selects[i].options.length > 0) { for (var j = 0; j < options.length; j++) { if (options[j].title == "") options[j].title = options[j].text; } } } }}
我目前想到的办法是：当鼠标悬停到<select>时，创建一个这个下拉列表的副本，同时把焦点移到这个副本上，把副本的样式设成绝对定位，而且盖在原来的下拉列表上，宽度根据option的显示内容自动拉伸，当这个副本失去焦点，或者用户对它进行了选择操作后，获取副本的selectedIndex，赋给原来的select对象。具体代码如下：
< 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.onmouseover = null ;
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);
newSelectObj.focus();
}
function RollbackWidth(selectObj, newSelectObj)
{
selectObj.selectedIndex = newSelectObj.selectedIndex;
selectObj.style.visibility = " visible " ;
document.body.removeChild(newSelectObj);
}
</ 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 >
有了这个demo，我们就可以把其中的js提取出来，应用到项目中需要的地方了。
目前这种方式是给select注册了onmouseover，对于鼠标操作是没什么问题，如果用户是按tab键移动焦点就无效了。估计实际应用中这样的情形不会很多，所以暂不考虑，有兴趣的朋友可以再完善一下，或者看看有没有更好的解决方法。
转自：http://www.cnblogs.com/key/archive/2008/05/17/1201274.html
