固定宽度下拉列表中option内容显示不全问题解决方法

不少时候在页面中为了布局的需要，下拉列表<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，所以只能另想其它办法。

<SCRIPT LANGUAGE="JavaScript">
<!--
  oPopup = window.createPopup();
  function showtitle(obj){
   if(obj.selectedIndex!=-1){
      var oPopBody = oPopup.document.body
      oPopBody.style.backgroundColor = "lightyellow";
      oPopBody.style.border = "solid black 1px";
      oPopBody.innerHTML = obj.options[obj.selectedIndex].text;
      oPopup.show(event.screenX, event.screenY,obj.options[obj.selectedIndex].text.length*10, 25);
   }
 }
//-->
</SCRIPT>
 <select name="possible" size=10 MULTIPLE style="width=200" onchange = "showtitle(this)">   
  <option value="111">111111111111mhjk711111111tyujrrr111111111111</option>
  <option value="222">222</option>
  <option value="333">333</option>
  <option value="444">444</option>
  <option value="555">5523r5</option>
  <option value="333">33rhg3</option>
  <option value="444">44wrt4ewwe</option>
  <option value="555">55wrtggg5</option>
   </select>