主要思路:
通过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>
<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>
效果图如下: