div下拉框(待改善)
不说话,直接上代码,其中函数dealchose()没有实现,各位就不必纠结了
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <base href="<%=basePath%>"> <title>My JSP 'div下拉.jsp' starting page</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="This is my page"> <!-- <link rel="stylesheet" type="text/css" href="styles.css"> --> <script> function dealClick(){ var reasonStr = document.getElementById("zsyy"); //需要弹出下拉列表的文本框 var repairList = document.getElementById("reasons"); //要弹出的下拉列表 var divClose = document.getElementById("tdClose"); var reasonOptions = document.getElementsByName("zsyys"); //所有列表元素 var zsyystr=new Array();//输入框填写的注塑原因 zsyystr=reasonStr.value.split(";"); var bNoAdjusted = true; for(var i=0;i<reasonOptions.length;i++){ for(var j=0;j<zsyystr.length;j++){ if(reasonOptions[i].value==zsyystr[j]){ reasonOptions[i].checked=true; } } } divClose.onclick = function() { repairList.style.display = "none"; if(reasonStr.value==''){ reasonStr.value="单击文本框选择修模原因"; reasonStr.style.color='#999999'; } }; //文本获得焦点时的事件 reasonStr.onfocus = function() { repairList.style.display = "block"; if(reasonStr.value=="单击文本框选择修模原因"){ reasonStr.value=''; reasonStr.style.color='#000000'; }else{ reasonStr.style.color='#000000'; } //reasonStr.style.color='#000'; if (bNoAdjusted) { bNoAdjusted = false; //设置下拉列表的宽度和位置 repairList.style.width =166; repairList.style.posTop = 40; repairList.style.posLeft = 118; } } } </script> </head> <body> <table> <tr> <td width="100" height="25" class="tableshortleftbg">注塑修模原因</td> <td > <input type="text" onMouseDown="dealClick()" id="zsyy" name="zsyy" size="22" value="单击文本框选择修模原因" style="color: #999999" readonly="readonly" /> <font color="red">*</font> <div id="reasons" style="display: none; border: 1px solid #000000; overflow: hidden; height: 150px; width: 50px; position: absolute; "> <table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td colspan="1" align="left" width="100px" style=" overflow: auto; height: 30px; background-color: #FFFFFF;"> <input name="zsyys" type="checkbox" value="毛刺" onClick="dealChosen()">毛刺 </td> <td colspan="1" align="left" width="100px" style=" overflow: auto; height: 30px; background-color: #FFFFFF;"> <input name="zsyys" type="checkbox" value="脱模剂" onClick="dealChosen()">脱模剂 </td> </tr> <tr> <td colspan="1" align="left" width="95px" style=" overflow: auto; height: 30px; background-color: #FFFFFF;"> <input name="zsyys" type="checkbox" value="油污" onClick="dealChosen()">油污 </td> <td align="left" style=" overflow: auto; height: 35px; background-color: #FFFFFF;"> <input name="zsyys" type="checkbox" value="浇口" onClick="dealChosen()">浇口 </td> </tr> <tr> <td align="left" style=" overflow: auto; height: 30px; background-color: #FFFFFF;" > <input name="zsyys" type="checkbox" value="机械手" onClick="dealChosen()">机械手 </td> <td align="left" style=" overflow: auto; height: 30px; background-color: #FFFFFF;"> <input name="zsyys" type="checkbox" value="变形" onClick="dealChosen()">变形 </td> </tr> <tr> <td colspan="3" align="left" style=" overflow: auto; height: 30px; background-color: #FFFFFF;"> <input name="zsyys" type="checkbox" value="修模不合格" onClick="dealChosen()">修模不合格 </td> </tr> <tr> <td colspan="3" height="30px" align="center" id="tdClose" style="cursor: hand; background-color:#CCCCCC;" ><b>关闭</b></td> </tr> </table> </div> </td> <td class="tableshortleftbg"> </td> <td width="100" class="tableshortleftbg">修模原因备注</td> <td><input type="text" name="yyrm" size=22 maxlength=50 ></td> <td class="tableshortleftbg"> </td> <td width="100" class="tableshortleftbg">紧急程度</td> <td> <input type="radio" name="jjcd" id="jj" size=22 maxlength=20 readonly="readonly " value="紧急"><span><b><font color="red">紧急</font></b></span> <input type="radio" name="jjcd" id="fj" size=22 maxlength=20 readonly=" readonly" value="非紧急"><span><b><font color="red">非紧急</font></b></span> </td> <td class="tableshortleftbg"> </td> </tr> </table> </body> </html>