Front desk
<!DOCTYPE HTML><HTML><Head><Metaname= "Author"content= "Silvan" /><Metahttp-equiv= "Content-type"content= "text/html; charset=utf-8" /><Scripttype= "Text/javascript"src=".. /js/jquery-2.1.1.min.js "></Script><title>Send a GET request</title><!--add a style to a select tag -<styletype= "Text/css">Select{width:160px;font-size:11pt;}</style></Head><Body><formAction= "hehe"> <Selectname= "First"ID= "First" > <optionvalue= "0">---Please select---</option> <optionvalue= "1" >China</option> <optionvalue= "2">United States</option> <optionvalue= "3">Japan</option> </Select> <Selectname= "Second"ID= "Second"></Select> <Scripttype= "Text/javascript"> //$ (function () {}), =$ (document). Ready (function () {}), $ (function () {}) is shorthand $(function(){ //Triggers when a drop-down list value is changed $("#first"). Change (function(){ //get drop-down list selection value varID=document.getElementById (" First"). Value; //Ajax Call Handling$.ajax ({type:"POST", URL:"second.jsp", Data:"id="+ID, success:function(data, Textstatus, JQXHR) {//separates the response data into a string array with the $ symbol varCityList=Data.split ("$"); //get drop-down list for menu display varDisplayselect=document.getElementById ("Second"); //Empty the destination drop-down listdisplayselect.innerhtml= NULL; //creates an option with each element of a string array, //and add these options to the drop-down list for (varI= 0; I<citylist.length; I++){ //Create a <option.../> element varop=Document.createelement ("option"); Op.innerhtml=Citylist[i]; //adds a new option to the end of the list boxdisplayselect.appendchild (OP); }}, Error:function(XMLHttpRequest, Textstatus, Errorthrown) {alert ("request failed! "); } }); }); });</Script></form></Body></HTML>
Background
<%@ Page ContentType="text/html; Charset=utf-8"language="Java"%><% StringIdstr= (String) Request.getparameter ("ID"); intID=Idstr== NULL ? 1 : Integer. parseint (IDSTR); Switch (ID) { Case 1: Out.println ("Shanghai $ guangzhou $ Beijing"); Break Case 2: Out.println ("Washington $ New York $ California"); Break Case 3: Out.println ("Tokyo $ slab $ Fukuoka"); Break }%>
Ajax jquery Menu Linkage case