- 浏览: 700205 次
- 性别:
- 来自: 北京
文章分类
- 全部博客 (239)
- 系统架构设计 (16)
- java collection framework (2)
- java分布式 (4)
- java多线程 (0)
- 故障处理及调优 (16)
- 软件开发过程及管理 (28)
- OS (5)
- 常用算法 (3)
- design pattern (8)
- transaction (7)
- java apps (48)
- corejava (7)
- java and DB (10)
- cache (0)
- webservice (14)
- web前端 (25)
- 报表 (4)
- 日志系统设计 (3)
- Oracle (4)
- mysql (11)
- xml (11)
- 数据源配置管理 (3)
- 企业数据存储 (4)
- php (2)
- 测试 (1)
最新评论
-
orangebook:
对于初学者来说,这样编写可能会误导,理解更烦锁。
观察者模式(发布-订阅) -
liudajiang:
呵呵 startThreads(rand ...
实践缩小Java synchronized 粒度 -
zengwenbo5566:
谢谢博主,学习了
解决getOutputStream() has already been called for this response -
u011335423:
大神厉害啊 可以了
解决getOutputStream() has already been called for this response -
xiang37:
...
解决getOutputStream() has already been called for this response
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(); }
发表评论
-
div的显示与隐藏
2013-06-19 16:49 1045今天做个小功能(2009-3-6):将取得的数据显示在一js ... -
学习网页标准的5个步骤
2013-06-18 18:57 940我想每一个刚刚接触web标准的人都会问这样的问题,我就 ... -
request.getContextPath()详解
2013-06-18 18:56 950<%=request.getContextPath( ... -
MIMIE类型大全
2013-06-18 18:55 1030获取MIME:HttpContext.Current.Re ... -
js操作Dom生成动态表格
2010-07-15 17:19 1467项目中有个js的功能需求: 数据库表中有两个字段记录数据的两 ... -
eclipse+ext+spket安装
2010-07-07 16:25 1927参考网上相关文章,经过多次尝试才搞定这几个组合的安装,比较繁琐 ... -
Ajax简介
2010-06-30 15:14 9051、ajax技术的背景 ... -
js取服务器端时间,并提供动态下载链接
2010-06-30 14:57 2864最近项目中有这样一个需求: 页面动态刷新获取数据库中符合条件 ... -
用js进行正负小数及范围判断
2010-06-30 14:56 2192最近项目中遇到一个js判断:允许输入正负数、小数,并且输入值有 ... -
js时间比较(yyyymmdd)
2010-06-30 14:54 2920yyyymmdd格式时间比较实例,参考如下代码: & ... -
ajax的两种常用调用方式
2010-06-30 14:51 982方式1: //请求js <script langua ... -
XMLHttpRequest参数提交方式
2010-06-30 14:49 3696一般情况下,使用Ajax提交的参数多是些简单的字符串,可以直接 ... -
js获取HTML DOM节点元素方法总结
2010-06-30 14:42 1440在Web应用程序特别是Web2 ... -
extJS-itemselector的使用
2009-11-24 16:38 8346上图是富客户端界面中常用的选择方式,下面是项目中的一段示 ... -
extJS-动态改变baseParams
2009-10-12 22:18 9832项目中遇到一个问题:双击导航栏树节点,根据该树节点的属性ID在 ... -
ExtJS布局之border实例
2009-09-18 14:59 8892border布局是常见的布局样式,下面是一个实际项目的示例,比 ... -
客户端显示Store-Ext.data-Store
2009-09-04 20:38 2186store是一个为Ext器件提供record对象的存储容器,行 ... -
客户端记录显示缓存的刷新-ExtJS
2009-09-04 20:31 2091其实这是个非常简单的问题,仅供ExtJS初学者参考。 ... -
ExtJS分页条件参数传递
2009-08-19 10:30 5539这两天还在忙活那个可恨的ext的项目,说它可恨,通过解决这个小 ... -
EXTJS 查询数据,分页显示时传送自定义参数,添加控件的任何事件模板
2009-08-19 10:08 3213var querytext = new Ext.form.Te ...
相关推荐
在IT行业中,省市级联动菜单是一种常见的前端交互设计,它在网页或应用程序中用于选择省份、城市和区县,通常与后端数据库相结合,提供动态的下拉选择体验。这种菜单设计可以有效地节省用户输入时间,提高用户体验。...
无刷新联动菜单是一种基于AJAX(Asynchronous JavaScript and XML)技术实现的交互式网页设计模式。在传统的网页中,用户每次选择菜单项都需要通过页面跳转或者完全刷新页面来获取新的内容。而无刷新联动菜单则可以...
XML(eXtensible Markup Language)和JavaScript是Web开发中常用的两种技术,它们结合使用可以创建动态、交互式的用户界面,特别是在实现联动菜单这样的功能时。联动菜单是一种下拉菜单,当用户在主菜单上选择一个...
"三级联动菜单"是一种常见的网页交互设计,常用于下拉选择框或导航菜单,使得用户在选择时可以按层次逐级筛选,例如在选择省份、城市、区县时。这种菜单设计可以有效节省页面空间,同时提供清晰的层级关系,方便用户...
这种设计通常涉及到JavaScript、CSS和HTML等技术的结合使用,以实现下拉菜单的联动效果。"css+city-picker"是一个专门解决这个问题的插件,它简化了开发过程,提供了良好的用户体验。 "城市设置"功能允许开发者或...
在菜单联动中,JavaScript负责监听用户的点击事件,然后使用Ajax调用服务器端的处理程序,获取子菜单数据,并动态地在页面上插入或更新菜单结构。这些脚本可能还包含错误处理和状态维护的逻辑。 `images`目录可能...
以上就是关于“Ajax联动菜单”的相关知识点,包括Ajax技术原理、DOM操作、数据格式、事件处理、前端框架的应用以及性能优化和无障碍性设计等方面。掌握这些知识,可以有效地构建出功能丰富、用户体验优秀的联动菜单...
这种交互效果通常被称为“三级联动菜单”。在这个场景下,JavaScript 是一种常用的实现语言,因为它可以动态地更新DOM元素,实现数据与界面的实时同步。本文将详细讲解如何使用JavaScript实现省市区三级联动菜单。 ...
其中包括了使用JavaScript实现网页特效和CSS创建二级联动菜单,以及利用百度网盘进行资源分享,并且强调了资源的可复用性,如提供源码和使用说明文档。软件/插件的标签则暗示了这项资源的实用性和功能扩展性。对于...
在实际开发中,实现省市联动二级菜单有多种方式。一种常见方法是使用Ajax异步请求,当用户选择省份时,向服务器发送请求获取对应城市的JSON数据,然后用JavaScript动态渲染到二级菜单。这种方法对服务器端要求较高,...
本文实例讲述了JS简单实现...JS联动菜单,简单代码实现JS多级Select联动菜单,也就是大家常用的一款菜单,Select联动状态的菜单,网页上经常见到的效果,希望大家能用得上。 运行效果截图如下: 在线演示地址如下: ...
在联动菜单中,我们需要获取一级菜单和二级菜单的DOM元素,如`<select>`标签,并监听它们的事件,如`change`事件。 2. **事件监听**:当用户在一级菜单中选择一个省份时,我们需要监听这个`change`事件,然后触发...
【压缩包子文件的文件名称】"selectArea"很可能是指这个压缩包内的主要文件或目录名,可能是一个包含了选择区域(如省市区)功能的JavaScript文件或一个相关的HTML页面。在实际应用中,这个文件可能包含了实现三级...
二级联动菜单是一种常见的网页交互功能,当用户在选择上一级菜单(如省份)时,下一级菜单(如城市)会根据上一级的选择变更内容。这种效果可以提升用户体验,并使得网页具有更好的交互性。 首先,本文提供了两段...
【标题】"asp无限级联动Ajax无刷新"指的是在ASP(Active Server Pages)环境中实现的基于Ajax技术的无限级联动菜单功能。这种技术允许用户在不刷新整个网页的情况下,通过选择某一选项,动态加载并显示与其相关的...
在网页设计和开发中,交互性和用户体验是至关重要的因素,而jQuery四级联动菜单代码就是为提升这些方面而设计的一种高效解决方案。这个代码实现了一个多级的下拉菜单系统,允许用户通过逐级选择来达到更精确的导航或...
在IT行业中,网页开发是一项核心技能,而"省级联动+弹窗+首页布局"是网页交互设计中的常见需求。这个项目结合了HTML、CSS、jQuery和DIV技术,旨在实现一个功能丰富的网页界面。 首先,省级联动是网页表单中常见的一...
在4级联动菜单使用说明.doc中,可能会详细介绍如何通过JavaScript实现这种菜单,包括如何处理父级菜单与子级菜单之间的联动响应,以及如何确保在不同级别间平滑切换。联动菜单的实现涉及到DOM操作、事件监听和数据...
在传统的HTML页面中,如果要实现这种功能,通常需要在页面加载时一次性加载所有数据,这不仅会增加页面的加载时间,还可能导致用户在操作过程中需要等待大量数据加载完成。 而Ajax技术则提供了一种解决方案,它允许...
2. **省市联动**:这是一种常见的地理选择方式,用户在选择省份后,城市下拉菜单会动态更新,只显示与所选省份相关的城市。这种功能通过JavaScript实现,通常结合AJAX(异步JavaScript和XML)技术实时获取并更新城市...