Ajax implementation cascading Pull-down menu

Ajax implementation cascading Pull-down menu is very simple, the following is an AJAX implementation of the provincial and municipal cascading Drop-down menu;

In the JSP, add the onchange event to the <select>, triggering the event call to implement the Ajax 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 Province </option>
				<option value= "Hebei" > Hebei province </option>				
			 </select >
		City: <select name= "cit" id= "cit" >
				<option>--Please select--</option>				
			 </select>< br>
					
	</form>
</div>

The normal pull-down menu option is taken out of the database, and for convenience, I write the province directly in it; there is no actual option in the city except "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=xml
		Httprequest.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 the name or ID, used to get the value of the Select option;

The value of the selected option is submitted to the background via 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) t
	Hrows 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 Choose-"; } printwriterOut=response.getwriter ();
		Out.print (cities);
		Out.flush ();

		
	Out.close ();
 }
	
	
}

Description

The normal city is according to the province in the database query out, in order to facilitate me to write directly in the string;

In the callback function I return a string with a certain format and split it 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"); The select object of the city;

Cityselect.options gets all option objects, and deletes option from the forward loop (because this is the city that I chose before, change the provinces and cities);

var city=result.split ("|"); Get all the city (option value,option text child nodes) for traversal;

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

Creates an element node option and is a Select plus child node;

Add value and text node to option;