`

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();
}

 

分享到:
评论

相关推荐

    省市级联动菜单省市级联动菜单

    在IT行业中,省市级联动菜单是一种常见的前端交互设计,它在网页或应用程序中用于选择省份、城市和区县,通常与后端数据库相结合,提供动态的下拉选择体验。这种菜单设计可以有效地节省用户输入时间,提高用户体验。...

    无刷新联动菜单AJAX

    无刷新联动菜单是一种基于AJAX(Asynchronous JavaScript and XML)技术实现的交互式网页设计模式。在传统的网页中,用户每次选择菜单项都需要通过页面跳转或者完全刷新页面来获取新的内容。而无刷新联动菜单则可以...

    XML+JavaSript联动菜单

    XML(eXtensible Markup Language)和JavaScript是Web开发中常用的两种技术,它们结合使用可以创建动态、交互式的用户界面,特别是在实现联动菜单这样的功能时。联动菜单是一种下拉菜单,当用户在主菜单上选择一个...

    三级联动菜单

    "三级联动菜单"是一种常见的网页交互设计,常用于下拉选择框或导航菜单,使得用户在选择时可以按层次逐级筛选,例如在选择省份、城市、区县时。这种菜单设计可以有效节省页面空间,同时提供清晰的层级关系,方便用户...

    超好用的省市区三级联动+常用城市设置

    这种设计通常涉及到JavaScript、CSS和HTML等技术的结合使用,以实现下拉菜单的联动效果。"css+city-picker"是一个专门解决这个问题的插件,它简化了开发过程,提供了良好的用户体验。 "城市设置"功能允许开发者或...

    Ajax菜单联动

    在菜单联动中,JavaScript负责监听用户的点击事件,然后使用Ajax调用服务器端的处理程序,获取子菜单数据,并动态地在页面上插入或更新菜单结构。这些脚本可能还包含错误处理和状态维护的逻辑。 `images`目录可能...

    ajax联动菜单

    以上就是关于“Ajax联动菜单”的相关知识点,包括Ajax技术原理、DOM操作、数据格式、事件处理、前端框架的应用以及性能优化和无障碍性设计等方面。掌握这些知识,可以有效地构建出功能丰富、用户体验优秀的联动菜单...

    javascript省市区三级联动菜单(精简好用)

    这种交互效果通常被称为“三级联动菜单”。在这个场景下,JavaScript 是一种常用的实现语言,因为它可以动态地更新DOM元素,实现数据与界面的实时同步。本文将详细讲解如何使用JavaScript实现省市区三级联动菜单。 ...

    js特效脚本含源码和说明可跳转回首页的CSS二级联动菜单

    其中包括了使用JavaScript实现网页特效和CSS创建二级联动菜单,以及利用百度网盘进行资源分享,并且强调了资源的可复用性,如提供源码和使用说明文档。软件/插件的标签则暗示了这项资源的实用性和功能扩展性。对于...

    省市联动二级菜单

    在实际开发中,实现省市联动二级菜单有多种方式。一种常见方法是使用Ajax异步请求,当用户选择省份时,向服务器发送请求获取对应城市的JSON数据,然后用JavaScript动态渲染到二级菜单。这种方法对服务器端要求较高,...

    JS简单实现多级Select联动菜单效果代码

    本文实例讲述了JS简单实现...JS联动菜单,简单代码实现JS多级Select联动菜单,也就是大家常用的一款菜单,Select联动状态的菜单,网页上经常见到的效果,希望大家能用得上。 运行效果截图如下: 在线演示地址如下: ...

    js各省联动二级菜单切换

    在联动菜单中,我们需要获取一级菜单和二级菜单的DOM元素,如`&lt;select&gt;`标签,并监听它们的事件,如`change`事件。 2. **事件监听**:当用户在一级菜单中选择一个省份时,我们需要监听这个`change`事件,然后触发...

    三级联动--全国城市--html

    【压缩包子文件的文件名称】"selectArea"很可能是指这个压缩包内的主要文件或目录名,可能是一个包含了选择区域(如省市区)功能的JavaScript文件或一个相关的HTML页面。在实际应用中,这个文件可能包含了实现三级...

    基于Javascript实现二级联动菜单效果

    二级联动菜单是一种常见的网页交互功能,当用户在选择上一级菜单(如省份)时,下一级菜单(如城市)会根据上一级的选择变更内容。这种效果可以提升用户体验,并使得网页具有更好的交互性。 首先,本文提供了两段...

    asp无限级联动Ajax无刷新

    【标题】"asp无限级联动Ajax无刷新"指的是在ASP(Active Server Pages)环境中实现的基于Ajax技术的无限级联动菜单功能。这种技术允许用户在不刷新整个网页的情况下,通过选择某一选项,动态加载并显示与其相关的...

    jQuery四级联动菜单代码

    在网页设计和开发中,交互性和用户体验是至关重要的因素,而jQuery四级联动菜单代码就是为提升这些方面而设计的一种高效解决方案。这个代码实现了一个多级的下拉菜单系统,允许用户通过逐级选择来达到更精确的导航或...

    省级联动+弹窗+首页布局(HTML+CSS+Jquery+DIV)

    在IT行业中,网页开发是一项核心技能,而"省级联动+弹窗+首页布局"是网页交互设计中的常见需求。这个项目结合了HTML、CSS、jQuery和DIV技术,旨在实现一个功能丰富的网页界面。 首先,省级联动是网页表单中常见的一...

    js特效-丰富菜单样式

    在4级联动菜单使用说明.doc中,可能会详细介绍如何通过JavaScript实现这种菜单,包括如何处理父级菜单与子级菜单之间的联动响应,以及如何确保在不同级别间平滑切换。联动菜单的实现涉及到DOM操作、事件监听和数据...

    ajax无限极联动

    在传统的HTML页面中,如果要实现这种功能,通常需要在页面加载时一次性加载所有数据,这不仅会增加页面的加载时间,还可能导致用户在操作过程中需要等待大量数据加载完成。 而Ajax技术则提供了一种解决方案,它允许...

    日历_省市联动_按钮样式_js_asp

    2. **省市联动**:这是一种常见的地理选择方式,用户在选择省份后,城市下拉菜单会动态更新,只显示与所选省份相关的城市。这种功能通过JavaScript实现,通常结合AJAX(异步JavaScript和XML)技术实时获取并更新城市...

Global site tag (gtag.js) - Google Analytics