Home > Developer > Web Develop
<%@ page language="java" pageencoding="Utf-8"%><! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" ><html> <head> <title>cascading menus</title> <script type="text/javascript" src="Xmlfile.js"> </script> </head> <body> <select id="province" name="province"> <option value="">Please select ....</option> </Select> <select id=' city ' name=' city '> <option value="">Please select .....</option> </Select> </body></html>JS file in JSP page ...
Here are the main steps to achieve level two linkage:
Window.onload= function(){ //1. Getting Objects varXhr=ajaxfunction ();//2. MonitoringXhr.onreadystatechange= function(){ if(xhr.readystate==4){if(xhr.status== $){varDocxml=xhr.responsexml;//parsing the contents of Docxml varProvincexmlelements=docxml.getelementsbytagname ("province");//Traverse all the province for(varI=0; i<provincexmlelements.length;i++) {varProvincexmlelement=provincexmlelements[i];varProvincexmlvalue=provincexmlelement.getattribute ("Name");//<option value= "" > Please select ....</option> varOption=document.createelement ("option"); Option.setattribute ("Value", Provincexmlvalue);varText=document.createtextnode (Provincexmlvalue); Option.appendchild (text);//hook-up node varProvincedocelement=document.getelementbyid ("province"); Provincedocelement.appendchild (option); }//Trigger an event when clicking on a provincedocument.getElementById ("province"). onchange= function(){ //Clear City list varCitydocelement = document.getElementById ("City");varOptions = Citydocelement.getelementsbytagname ("option"); for(varz=options.length-1;z>0; z--) {cityelement.removechild (options[z]); }//1. Which province is selected in the page varPrivincedocvalue= This. value;//2. Parsing information for all province in XML content for(varI=0; i<provincexmlelements.length;i++) {varProvincexmlelement=provincexmlelements[i];varProvincexmlvalue=provincexmlelement.getattribute ("Name");if(Privincedocvalue==provincexmlvalue) {//Resolve the city in which varCityxmlelements=provincexmlelement.getelementsbytagname ("City");//Traverse City for(varj=0; j<cityxmlelements.length;j++) {varCITYXMLELEMENT=CITYXMLELEMENTS[J];varCityxmlelementvalue=cityxmlelement.firstchild.nodevalue;//<option><option/> varOption= Document.createelement ("option"); Option.setattribute ("Value", Cityxmlelementvalue);//Create a text node varText=document.createtextnode (Cityxmlelementvalue); Option.appendchild (text); Citydocelement.appendchild (option); } } }//3. Traversing all the province information} } } }//3. Establishing a link between a client and a serverXhr.open ("Get",".. /servlet/xmlfileservlet ",true);//4. Sending DataXhr.send (NULL);} function ajaxfunction(){ varXmlHttp;Try{//Firefox, Opera 8.0+, Safarixmlhttp=NewXMLHttpRequest (); }Catch(e) {Try{//Internet Explorerxmlhttp=NewActiveXObject ("Msxml2.xmlhttp"); }Catch(e) {Try{xmlhttp=NewActiveXObject ("Microsoft.XMLHTTP"); }Catch(e) {} } }returnXmlHttp; }Package app. servlet;Import Java. IO. IOException;Import Java(i). PrintWriter;Import Javax. servlet. Servletexception;Import Javax. servlet. HTTP. HttpServlet;Import Javax. servlet. HTTP. HttpServletRequest;Import Javax. servlet. HTTP. HttpServletResponse;public class Xmlfileservlet extends HttpServlet {public void doget (HttpServletRequest request, HttpServletResponse Res Ponse) throws Servletexception, IOException {***response. setContentType("Text/xml;charset=utf-8");***PrintWriter out= Response. Getwriter(); /* * If actually developed, query database * Result set is JavaBean type * result set is set content: Array, List, map and set * * * Now do not query database, mock query database: Build XML format manually */An XML format constructed by hand is actually a string of type string out. println("<china>"); out. println("<province name= ' Jilin Province ' >"); out. println("<city> Changchun </city>"); out. println("<city> Jilin </city>"); out. println("<city> siping </city>"); out. println("<city> Songyuan </city>"); out. println("<city> Tonghua </city>"); out. println("</province>"); out. println("<province name= ' Liaoning Province ' >"); out. println("<city> Shenyang </city>"); out. println("<city> Dalian </city>"); out. println("<city> Anshan </city>"); out. println("<city> Fushun </city>"); out. println("<city> Tieling </city>"); out. println("</province>"); out. println("<province name= ' Shandong Province ' >"); out. println("<city> Jinan </city>"); out. println("<city> Qingdao </city>"); out. println("<city> Weihai </city>"); out. println("<city> Yantai </city>"); out. println("<city> Weifang </city>"); out. println("</province>"); out. println("</china>");} public void DoPost (HttpServletRequest request, httpservletresponse response) throws Servletexception, Ioex ception {doget (request, response);}}4. Effect:
Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced.
Black Horse Day17 ajax& achieve level two linkage
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
