解决SELECT框中文字过长的方法

前几天在工作的时候，测试提了个BUG，我们的系统有很多的地方用的SELECT框把框中的信息给遮挡了，为了解决这个问题想了很多方法，一开始想弄一个横向的滚动条，可是网上给出的资料很少，于是想到用一个小TIP信息来提醒是不是也可以呢，所以写了以下的代码：

var oP=window.createPopup();
var oPopBody;

function showTip(Sobj){
 var Sindex = Sobj.selectedIndex;
 if(Sindex>=0){
  var Svalue = Sobj.options[Sindex].text;
  var Slen = Svalue.length*10;
  oPopBody= oP.document.body;
  oPopBody.style.background="#fdfce9";   
    oPopBody.style.border="solid black 1px";       
    oPopBody.innerHTML="<div style='font-family:Arial;font-size:12px;'>"+Svalue+"</div>";
    if(Slen>90){
     oP.show(window.event.clientX+10,window.event.clientY+10,Slen+40,20,document.body);
    }
   }
}

 function hideTip(Sobj){    
  if(oP.isOpen){   
    oP.hide();    
   }  
 }

 

以下为JSP代码：

<select name="seeit" size="5" style="overflow-x:scroll;width:100" onclick="showTip(this)" onmouseout= "hideTip(this)">
<option title="html中的文字太长，列表框中显示不完整，麻烦大家了" value="f">html中的文字太长，列表框中显示不完整，麻烦大家了</option>
<option title="听说是用js代码实现，麻烦给个例子，谢谢 " value="d" style="width:auto">听说是用js代码实现，麻烦给个例子，谢谢 </option>
<option title="或者鼠标指在某条上，显示完整的文字也行">或者鼠标指在某条上，显示完整的文字也行</option>
<option title="或者鼠标指在某条上，显示完整的文字也行">或者鼠标指在某条上，显示完整的文字也行</option>
<option title="或者鼠标指在某条上，显示完整的文字也行">或者鼠标指在某条上，显示完整的文字也行</option>
<option title="或者鼠标指在某条上，显示完整的文字也行">或者鼠标指在某条上，显示完整的文字也行</option>
<option title="或者鼠标指在某条上，显示完整的文字也行">或者鼠标指在某条上，显示完整的文字也行</option> 
</select>

 

好了，一切搞定！