主要思路：
通過Iframe添加滾動條，在調(diào)用頁面使用Iframe實現(xiàn)滾動條，在iframe頁面里面實現(xiàn)多選select。通過主頁面將動態(tài)option傳遞給iframe的select實現(xiàn)下拉框。通過popup窗口的方式實現(xiàn)提示框。
說明：調(diào)用頁面代碼里面還加了一個隱藏多選下拉框的目的是為了將值方便的傳遞以及保持相對較少的代碼改動（主要是修改實現(xiàn)）。
調(diào)用頁面代碼：
- <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頁面內(nèi)容：
- <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>
效果圖如下：
