java实现的二级联动菜单效果
程序员文章站
2024-03-13 19:36:51
本文实例讲述了java实现的二级联动菜单效果。分享给大家供大家参考,具体如下:
jsp代码:
<%@ page language="java" pagee...
本文实例讲述了java实现的二级联动菜单效果。分享给大家供大家参考,具体如下:
jsp代码:
<%@ page language="java" pageencoding="utf-8"%> <html> <head> <title>二级菜单联动演示</title> <script type="text/javascript"> var req; window.onload=function() {//页面加载时的函数 } function change_select(){//当第一个下拉框的选项发生改变时调用该函数 var province = document.getelementbyid('province').value; var url = "select?id="+ escape(province); if(window.xmlhttprequest){ req = new xmlhttprequest(); }else if(window.activexobject){ req = new activexobject("microsoft.xmlhttp"); } if(req){ req.open("get",url,true); //指定回调函数为callback req.onreadystatechange = callback; req.send(null); } } //回调函数 function callback(){ if(req.readystate ==4){ if(req.status ==200){ parsemessage();//解析xml文档 }else{ alert("不能得到描述信息:" + req.statustext); } } } //解析返回xml的方法 function parsemessage(){ var xmldoc = req.responsexml.documentelement;//获得返回的xml文档 var xsel = xmldoc.getelementsbytagname('select'); //获得xml文档中的所有<select>标记 var select_root = document.getelementbyid('city'); //获得网页中的第二个下拉框 select_root.options.length=0; //每次获得新的数据的时候先把每二个下拉框架的长度清0 for(var i=0;i<xsel.length;i++){ var xvalue = xsel[i].childnodes[0].firstchild.nodevalue; //获得每个<select>标记中的第一个标记的值,也就是<value>标记的值 var xtext = xsel[i].childnodes[1].firstchild.nodevalue; //获得每个<select>标记中的第二个标记的值,也就是<text>标记的值 var option = new option(xtext, xvalue); //根据每组value和text标记的值创建一个option对象 try{ select_root.add(option);//将option对象添加到第二个下拉框中 }catch(e){ } } } </script> </head> <body> <div align="center"> <form name="form1" method="post" action=""> <table width="70%" border="0" cellspacing="0" cellpadding="0"> <tr> <td align="center"> 二级联动示例 </td> </tr> <tr> <td> <select name="province" id="province" onchange="change_select()"> <!–第一个下拉菜单–> <option value="0"> 请选择 </option> <option value="1"> 北京 </option> <option value="2"> 天津 </option> <option value="3"> 山东 </option> </select> <select name="city" id="city"> <!–第二个下拉菜单–> <option value="0"> 请选择 </option> </select> </td> </tr> <tr> <td> </td> <tr> </table> </form> </div> </body> </html>
java代码:
package com; import java.io.ioexception; import javax.servlet.servletexception; import javax.servlet.http.httpservlet; import javax.servlet.http.httpservletrequest; import javax.servlet.http.httpservletresponse; /*** * * @author zdw * */ public class selectservlet extends httpservlet { private static final long serialversionuid = 1l; public selectservlet() { super(); } public void destroy() { super.destroy(); } public void doget(httpservletrequest request, httpservletresponse response) throws servletexception, ioexception { // response.setcharacterencoding("gbk"); response.setcontenttype("text/xml"); response.setheader("cache-control", "no-cache"); request.setcharacterencoding("gbk"); response.setcharacterencoding("utf-8"); string targetid = request.getparameter("id").tostring(); system.out.println(targetid); // 获得请求中参数为id的值 string xml_start = "<selects>"; string xml_end = "</selects>"; string xml = ""; if (targetid.equalsignorecase("0")) { xml = "<select><value>0</value><text>请选择</text></select>"; } else if (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>"; } else if (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>"; } string last_xml = xml_start + xml + xml_end; response.getwriter().write(last_xml); } public void dopost(httpservletrequest request, httpservletresponse response) throws servletexception, ioexception { doget(request, response); } public void init() throws servletexception { } }
xml代码:
<?xml version="1.0" encoding="utf-8"?> <web-app version="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程序设计有所帮助。