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

最新推荐文章于 2023-03-24 22:47:09 发布

deng947

最新推荐文章于 2023-03-24 22:47:09 发布

阅读量371

点赞数

文章标签： 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>