html页面联动菜单比较常见,一般情况下,点击一个radio或者change一个select,根据业务逻辑的需要,页面动态显示一些不同的选择项。
下面是最近项目中一个常用的场景,处理方式比较简单,但很实用。程序处理逻辑:选择不同的radio,通过java程序到DB中进行查询,得到不同的结果,替换原来的选择项,显示到页面上。
<script type="text/javascript"> function levelClick(levelvalue){ var checkedInfoStr = ""; var id = "Level Type"; var forcastNode = document.getElementById(id); var inputnode = forcastNode.getElementsByTagName("input"); if(levelvalue=="pl"){ document.getElementById("leveltypeId_pl").checked=true; }else if(levelvalue=="qt"){ document.getElementById("leveltypeId_qt").checked=true; } for (var i = 0; i < inputnode.length; i++) { if ( inputnode[i].checked == true ){ checkedInfoStr = inputnode[i].value; break; } } ltypeValue1 = checkedInfoStr; var centerid ="Original Center"; var centerNode = document.getElementById(centerid); var inputnode = centerNode.getElementsByTagName("input"); for (var i = 0; i < inputnode.length; i++) { if ( inputnode[i].checked == true ){ checkedInfoStr += "#"; checkedInfoStr += inputnode[i].value; break; } } //这里发出去的信息的格式是ltype#centername的形式 creatXMLHttpRequest(); //alert(checkedInfoStr); var url="tiggeCon_LtypeAndCenter2.dhcc"; xmlHttp.open("POST",url,true); //xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); xmlHttp.onreadystatechange=handleStateChangeLevel; //alert(checkedInfoStr); xmlHttp.send(checkedInfoStr); } function handleStateChangeLevel(){ if(xmlHttp.readyState==4){ levelChange(); } } function levelChange(){// 从服务器提取数据 var msg = xmlHttp.responseText; //得到返回的信息 //alert(msg); var id = "pressid"; var pressNode = document.getElementById(id); pressNode.innerHTML = ""; pressNode.innerHTML=msg; if(ltypeValue1 == "sl"){ document.getElementById("pressureid").checked=true; document.all["Pressure Level"].style.display='none'; } else{ document.all["Pressure Level"].style.display=''; } } </script> <tr> <td align="left" nowrap="nowrap"> <input id="leveltypeId_qt" name="leveltypeId" value="var1" οnclick="levelClick('qt')" type="radio">single level products </td> <td align="left" nowrap="nowrap"> <input id="leveltypeId_pl" name="leveltypeId" value="var2" οnclick="levelClick('pl')" checked="checked" type="radio">pressure level products </td> </tr>
服务端处理:
//根据DB查询结果构造页面div
private String test(String ltype,String cccc){
StringBuffer sb=new StringBuffer();
sb.append("<div id=\"Pressure Level\" style=\"width:605px;text-align:center;\" height=\"auto\">");
sb.append("<fieldset style=\"font-size: 14px;\"><legend>Pressure Level</legend>");
sb.append("<table class=\"u_fie_table\"><tbody>");
String[][] pressurelevel = getPlevelByLtypeAndCCCC(ltype,cccc);//数据库查询
if(pressurelevel!=null){
int ys = pressurelevel.length % 6;
int rowcount = 0;
int colcount = 6;
if(ys == 0){
rowcount = (pressurelevel.length)/colcount;
}else{
rowcount = ((pressurelevel.length)/colcount)+1;
}
for(int i = 0; i < rowcount; i++){
sb.append("<tr>");
if(i == rowcount-1 && ys != 0){
colcount = ys;
}
for(int j = 0; j < colcount; j++){
int z = i * 6 + j;
sb.append("<td align=\"left\" nowrap=\"nowrap\">");
sb.append("<input id=\"pressureid\" name=\"pressureid\" value=");
sb.append(pressurelevel[z][0]);
sb.append(" type=\"checkbox\">");
sb.append(Integer.parseInt(pressurelevel[z][0])+"hPa");
sb.append("</td>");
}
sb.append("</tr>");
}
}
sb.append("<tr><td width=\"100%\" colspan=\"6\" align=\"center\">");
sb.append("<style type=\"text/css\">");
sb.append(".u_fie_tabent{ width:100%;text-align:center;border-top:dotted 1px #d9e4ee;padding-top:5px;margin-top:10px;}");
sb.append(".u_fie_tabent a{text-decoration: none;text-decoration:none;display:inline-table;padding:2px 5px;margin:2px 5px;border:solid 1px #d9e4ee;height:20px;line-height:18px;color:#666;background:#eef6fc;}");
sb.append(".u_fie_tabent a:hover{background:#0066FF;color:#fff;}");
sb.append("</style>");
sb.append("<div class=\"u_fie_tabent\" >");
sb.append("<a href=\"javascript:checkAll(document.forms[0].pressureid);\">Select All</a>");
sb.append("<a href=\"javascript:uncheckAll(document.forms[0].pressureid);\">Clear All</a>");
sb.append("</div>");
sb.append("</td></tr>");
sb.append("</tbody></table>");
sb.append("</fieldset></div>");
....
return sb.toString();
}