主要思路：
通過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>
效果圖如下：
