通过Iframe实现带横向滚动条的多选下拉框并且带提示框

deng947

浏览: 6473 次

最近访客更多访客>>

winkly

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (3)

社区版块

存档分类

JSP

主要思路：
通过Iframe添加滚动条，在调用页面使用Iframe实现滚动条，在iframe页面里面实现多选select。通过主页面将动态option传递给iframe的select实现下拉框。通过popup窗口的方式实现提示框。
说明：调用页面代码里面还加了一个隐藏多选下拉框的目的是为了将值方便的传递以及保持相对较少的代码改动（主要是修改实现）。
调用页面代码：

<select name=TMPFIELD size=9  style='width:160px;display:none;' multiple>
<%
   for(int opt5 =0;opt5<cols.size();opt5++){
     RepColsVo colVo =(RepColsVo) cols.get(opt5);
%>
<option title="<%=colVo.getRepColdis()%>" value="<%=colVo.getReportColid()%>"><%=colVo.getRepColdis()%></option>
<%}%>
</select>
<iframe name="iframeShowFields" src="<%=request.getContextPath()%>/jsp/include/iframeSelectReports.jsp"  id="iframeshow" allowTransparency="true"    style="z-index:0;height:150px;width:140px;" scrolling="auto">
</iframe>

Iframe页面内容：

<html>
<head>
<script language="javascript">
  var oP=window.createPopup();
  var globalobject;
  var oPopBody;
  function   showTip(_obj){
  globalobject=_obj;
  oPopBody= oP.document.body;
  line=parseInt(event.offsetY/15);
  if(globalobject.options.length>0){
  if(line>globalobject.options.length-1)
  {  
      line=globalobject.options.length-1; 
  } 
  oPopBody.style.background="#fdfce9"; 
  oPopBody.style.border="solid black 1px";
  oPopBody.innerHTML="";
  var sText =globalobject.options[line].text;    
  oPopBody.innerHTML='<div style="font-family:Arial;font-size:12px;">'+sText+'</div>'; 
  len=globalobject.options[line].text.length*10;
  oP.show(event.clientX+10,event.clientY+10,len, 20,document.body);
  } 
 }
 function   hideTip(_obj){  
  if(oP.isOpen){ 
  	oP.hide();  
   }
 }
function   addOption(){ 
	var   s=parent.document.frmdefine.TMPFIELD;
	var len=s.length;
	for(var i=0;i<len;i++)
	{
		var opt=document.createElement("OPTION");      
        opt.text=s.options[i].text;  
        opt.value=s.options[i].value;
        TMPFIELD.add(opt);
	}
	 
 
 }
 </script>
</head>
<body bgcolor="#efefef" onload="addOption()">
<select  id="idtmpfield" onclick="showTip(this);" onmouseout="hideTip(this);" name="TMPFIELD" size=9   style="background-color:#efefef;width:auto;height:auto;border-width:0px;border-style:none;position:absolute;z-index:0;line-height:14px;border:none;clip:rect(0 95% 97% 0);margin-left:-13;margin-right:-50;margin-top:-19;margin-bottom:-40" multiple >
</select>
</body>
</html>