java实现的二级联动菜单效果
本文实例讲述了java实现的二级联动菜单效果。分享给大家供大家参考,具体如下:
JSP代码:
<%@pagelanguage="java"pageEncoding="UTF-8"%> <html> <head> <title>二级菜单联动演示</title> <scripttype="text/javascript"> varreq; window.onload=function() {//页面加载时的函数 } functionChange_Select(){//当第一个下拉框的选项发生改变时调用该函数 varprovince=document.getElementById('province').value; varurl="select?id="+escape(province); if(window.XMLHttpRequest){ req=newXMLHttpRequest(); }elseif(window.ActiveXObject){ req=newActiveXObject("Microsoft.XMLHTTP"); } if(req){ req.open("GET",url,true); //指定回调函数为callback req.onreadystatechange=callback; req.send(null); } } //回调函数 functioncallback(){ if(req.readyState==4){ if(req.status==200){ parseMessage();//解析XML文档 }else{ alert("不能得到描述信息:"+req.statusText); } } } //解析返回xml的方法 functionparseMessage(){ varxmlDoc=req.responseXML.documentElement;//获得返回的XML文档 varxSel=xmlDoc.getElementsByTagName('select'); //获得XML文档中的所有<select>标记 varselect_root=document.getElementById('city'); //获得网页中的第二个下拉框 select_root.options.length=0; //每次获得新的数据的时候先把每二个下拉框架的长度清0 for(vari=0;i<xSel.length;i++){ varxValue=xSel[i].childNodes[0].firstChild.nodeValue; //获得每个<select>标记中的第一个标记的值,也就是<value>标记的值 varxText=xSel[i].childNodes[1].firstChild.nodeValue; //获得每个<select>标记中的第二个标记的值,也就是<text>标记的值 varoption=newOption(xText,xValue); //根据每组value和text标记的值创建一个option对象 try{ select_root.add(option);//将option对象添加到第二个下拉框中 }catch(e){ } } } </script> </head> <body> <divalign="center"> <formname="form1"method="post"action=""> <tablewidth="70%"border="0"cellspacing="0"cellpadding="0"> <tr> <tdalign="center"> 二级联动示例 </td> </tr> <tr> <td> <selectname="province"id="province"onChange="Change_Select()"> <!–第一个下拉菜单–> <optionvalue="0"> 请选择 </option> <optionvalue="1"> 北京 </option> <optionvalue="2"> 天津 </option> <optionvalue="3"> 山东 </option> </select> <selectname="city"id="city"> <!–第二个下拉菜单–> <optionvalue="0"> 请选择 </option> </select> </td> </tr> <tr> <td> </td> <tr> </table> </form> </div> </body> </html>
Java代码:
packagecom; importjava.io.IOException; importjavax.servlet.ServletException; importjavax.servlet.http.HttpServlet; importjavax.servlet.http.HttpServletRequest; importjavax.servlet.http.HttpServletResponse; /*** * *@authorzdw * */ publicclassSelectServletextendsHttpServlet { privatestaticfinallongserialVersionUID=1L; publicSelectServlet() { super(); } publicvoiddestroy() { super.destroy(); } publicvoiddoGet(HttpServletRequestrequest,HttpServletResponseresponse) throwsServletException,IOException { //response.setCharacterEncoding("GBK"); response.setContentType("text/xml"); response.setHeader("Cache-Control","no-cache"); request.setCharacterEncoding("GBK"); response.setCharacterEncoding("UTF-8"); StringtargetId=request.getParameter("id").toString(); System.out.println(targetId); //获得请求中参数为id的值 Stringxml_start="<selects>"; Stringxml_end="</selects>"; Stringxml=""; if(targetId.equalsIgnoreCase("0")) { xml="<select><value>0</value><text>请选择</text></select>"; }elseif(targetId.equalsIgnoreCase("1")) { xml="<select><value>1</value><text>昌平</text></select>"; xml+="<select><value>2</value><text>丰台</text></select>"; xml+="<select><value>3</value><text>海淀</text></select>"; xml+="<select><value>4</value><text>朝阳</text></select>"; }elseif(targetId.equalsIgnoreCase("2")) { xml="<select><value>1</value><text>塘沽区</text></select>"; xml+="<select><value>2</value><text>汉沽区</text></select>"; xml+="<select><value>3</value><text>大港区</text></select>"; xml+="<select><value>4</value><text>东丽区</text></select>"; }else {//如果是3,则返回下面的字符 xml="<select><value>1</value><text>济南</text></select>"; xml+="<select><value>2</value><text>青岛</text></select>"; xml+="<select><value>3</value><text>淄博</text></select>"; xml+="<select><value>4</value><text>枣庄</text></select>"; } Stringlast_xml=xml_start+xml+xml_end; response.getWriter().write(last_xml); } publicvoiddoPost(HttpServletRequestrequest,HttpServletResponseresponse) throwsServletException,IOException { doGet(request,response); } publicvoidinit()throwsServletException { } }
XML代码:
<?xmlversion="1.0"encoding="UTF-8"?> <web-appversion="2.4"xmlns="http://java.sun.com/xml/ns/j2ee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd"> <servlet> <servlet-name>SelectServlet</servlet-name> <servlet-class>com.SelectServlet</servlet-class> </servlet> <servlet-mapping> <servlet-name>SelectServlet</servlet-name> <url-pattern>/select</url-pattern> </servlet-mapping> <welcome-file-list> <welcome-file>index.jsp</welcome-file> </welcome-file-list> </web-app>
更多java相关内容感兴趣的读者可查看本站专题:《Java数据结构与算法教程》、《Java操作DOM节点技巧总结》、《Java文件与目录操作技巧汇总》和《Java缓存操作技巧汇总》
希望本文所述对大家java程序设计有所帮助。