效果图:
<th> 安监管理类型: </th> <td> <input type="button" id="SafManTypeName" name="SafManTypeName" value="请选择安监管理类型" οnclick="selectSafMan()"> <div id="SafMan" style="position:absolute;z-index:1;width:500px;left:355px;top:24px;background:#3f419e;display:none;"> <div style="height: 8px;width: 8px;background: url('../images/yj1.jpg') no-repeat scroll left top transparent;font-size:0;line-height:0px;float:left;"></div> <div style="height: 8px;width: 484px;font-size:0;line-height:0;float:left;"></div> <div style="height: 8px;width: 8px;background: url('../images/yj2.jpg') no-repeat scroll right top transparent;font-size:0;line-height:0px;float:right;"></div> <div style="width: 500px;height:22px;cursor:move;background:#3f419e"> <h1 style="float:left;font-size:14px;font-weight:bold;color:#fff;margin-left:8px;_margin-left:4px">安监管理类型:</h1> <div style="float: right;margin-right:8px;_margin-right:4px;color:#fff;font-size:12px;"> <a style="color:fff;" href="#" οnclick="getSafManSelected();">[确定]</a> <a style="color:fff;" href="#" οnclick="getSelectedClose();">[取消]</a> </div> </div> <div style="border-left:#3f419e 2px solid;border-right:#3f419e 2px solid;background:#fff;"> <div style="padding:8px;width:496px;"> <table cellspacing="0" cellpadding="0" border="0"> <tr> <s:iterator value="SafManTypeList" status="smt"> <s:if test="(#smt.index+1)%3!=0"> <td style="padding:1px 2px;*padding:0 2px;width:165px"> <label> <input type="checkbox" name="recordCheckBox" value="<s:property value="option_key"/>" οnclick="getChkBoxName(this,'<s:property value="option_val"/>');"><s:property value="option_val"/> </label> </td> </s:if> <s:else> <td style="padding:1px 2px;*padding:0 2px;width:165px"> <label> <input type="checkbox" name="recordCheckBox" value="<s:property value="option_key"/>" οnclick="getChkBoxName(this,'<s:property value="option_val"/>');"><s:property value="option_val"/> </label> </td></tr><tr> </s:else> </s:iterator> </tr> </table> </div> </div> <div style="height: 8px;width: 8px;background: url('../images/yj3.jpg') no-repeat scroll left top transparent;font-size:0;line-height:0px;float:left;"></div> <div style="height:6px;width:484px;background:#fff;border-bottom:#3f419e 2px solid;font-size:0;line-height:0;float:left;"></div> <div style="height: 8px;width: 8px;background: url('../images/yj4.jpg') no-repeat scroll left top transparent;font-size:0;line-height:0px;float:left;"></div> </div> </td>
javascript:
function selectSafMan(){ if($("SafMan").style.display!="block"){ $("SafMan").style.display="block"; }else{ $("SafMan").style.display="none"; } } function getSelectedClose(){ $("SafMan").style.display="none"; } function getSafManSelected(){ if(safList.length>0){ $("SafManTypeName").value=safList.join("+"); }else{ $("SafManTypeName").value="请选择安监管理类型"; } $("SafMan").style.display="none"; } var safList=new Array(); function getChkBoxName(ch,name){ if(ch.checked==true){ safList.push(name); }else{ for(var i=0;i<safList.length;i++){ if(name==safList[i]){ safList.splice(i,1); } } } }