Ajax implementation Cascading drop-down menu

Ajax implementation Cascading drop-down menu is very simple, below is an AJAX implementation of the provincial and municipal cascading drop-down menu;

The JSP adds the onchange event to <select>, triggering the event to invoke the AJAX-enabled JS:

<div><form action= "Pcs" method= "Post" > Province: <select name= "Pro" id= "Pro" onchange= "chcity ();" ><option>--Please select--</option><option value= "Beijing" > Beijing </option><option value= " Shandong "> Shandong </option><option value=" Hebei "> Hebei </option> </select> City: <select name= "CIT" id= "CIT" ><option>--please select--</option> </select><br></form></div>

The normal drop-down menu option is taken out in the database, for convenience, I write the province directly inside; there is no actual option in the city except for "choice";

JS in the implementation of Ajax:

function chcity () {var pro=document.all ("Pro"). value;if (window. XMLHttpRequest) {xmlhttprequest=new XMLHttpRequest ();} Else{xmlhttprequest=new ActiveXObject ("Microsoft.XMLHTTP");} Xmlhttprequest.onreadystatechange=callback;var url= "Pcs"; Xmlhttprequest.open ("Post", url,true); Xmlhttprequest.setrequestheader ("Content-type", "application/x-www-form-urlencoded"); XmlHttpRequest.send ("pro=") +pro+ "&timestamp=" + (new Date ()). GetTime ()); Callback functions function CallBack () {if (xmlhttprequest.readystate==4 && xmlhttprequest.status==200) {var result= Xmlhttprequest.responsetext;result=result.replace (/(^\s*) | ( \s*$)/g, ""); var city=result.split ("|"); var cityselect=document.all ("CIT"); for (Var i=cityselect.options.length-1;i>=0;i--) {CitySelect.options.remove ( i);} for (Var i=0;i<city.length;i++) {var vn=city[i].split (","); var cvalue=vn[0];var cname=vn[1];var opt= Document.createelement ("option"); CitySelect.options.add (opt); opt.value=cvalue;opt.innerhtml=cname;}} 

Description

document.all ("Pro"). Value, based on name or ID, used to obtain the value of the Select option;

The value of the selected option is submitted to the backstage by Ajax, without looking at the callback function;

Background Java program:

Import Java.io.ioexception;import Java.io.printwriter;import Javax.servlet.servletexception;import Javax.servlet.http.httpservlet;import Javax.servlet.http.httpservletrequest;import Javax.servlet.http.httpservletresponse;public class Pcs extends HttpServlet {protected void doget (HttpServletRequest Request, HttpServletResponse response) throws Servletexception, IOException {doPost (request, response);} protected void DoPost (HttpServletRequest request, httpservletresponse response) throws Servletexception, IOException { Request.equals ("Utf-8"); Response.setcharacterencoding ("Utf-8"); String pro=request.getparameter ("Pro"); String cities= "", If (Pro.equalsignorecase ("Beijing")) {cities= "Haidian, Haidian |changping, changping |chaoyang, Chaoyang";} else if (pro.equalsignorecase ("Shandong")) {cities= "Jinan, Jinan |dezhou, Dezhou |qingdao, Qingdao";} else if (pro.equalsignorecase ("Hebei")) {cities= "Shijiazhuang, Shijiazhuang |langfang, Langfang |xingtai, Xingtai";} else{cities= ",--Please select--";} PrintWriter out=response.getwriter (); Out.print (cities); Out.flush (); Out.close ();}}

Description

The normal city is based on the province in the database query out, in order to facilitate my directly written in the string;

In the callback function I return a string with a certain format, and then split with split in the callback function;

Note that the last else can not be omitted, or in the city may appear undefinded;

A description of the callback function:

var cityselect=document.all ("CIT"); Get the city's select object;

Cityselect.options gets all the option objects, from the back to the forward loop to delete option (because this is the city that I chose to come out, change the provinces and cities will have to change);

var city=result.split ("|"); Get all the city (option's Value,option text sub-node) and traverse it;

var vn=city[i].split (",");
var cvalue=vn[0];
var cname=vn[1]; Gets the value and text node of option

Create the element node option and add the child nodes to the select;

Give option add value and text node;

Ajax implementation Cascading drop-down menu