html页面联动菜单常用处理方式

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" onclick="levelClick('qt')" type="radio">single level products
	</td>
	<td align="left" nowrap="nowrap">
		<input id="leveltypeId_pl" name="leveltypeId" value="var2" onclick="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();
}