Ajax two-level cascade menu implementation code

Time:2021-12-28

Client code:

Copy codeThe code is as follows:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″ />
< title > Untitled Document < / Title >
</head>
<script type=”text/javascript”>
var xmlHttp;
var a =new Array();
function createXMLHttpRequest(){
if(window.ActiveXObject){
xmlHttp=new ActiveXObject(“Microsoft.XMLHTTP”);
}
else if(window.XMLHttpRequest){
xmlHttp=new XMLHttpRequest();
}
}
function send_request(){
createXMLHttpRequest();
var year = document.getElementById(“year”);
var url = “check_2.php?page=”+escape(year.value);
xmlHttp.open(“GET”,url,true);
xmlHttp.onreadystatechange = checkit;
xmlHttp.send(null);
}
function checkit(){
if(xmlHttp.readystate == 4){
if(xmlHttp.status == 200){
showChild();
}
}
}
function showChild(){
var xmlDoc=xmlHttp.responseXML;
var content=xmlDoc.getElementsByTagName(“city”);
for(var i=0;i<content.length;i++){
var y=content[i];
a[i]=y.childNodes[0].data;
}
show1();
}
function show1(){
var obj=document.getElementById(“name”);
var number=obj.length;
for(var j=obj.length-1;j>=0;j–){
obj.removeChild(obj.childNodes.item(j));
}
for(var i=0;i<a.length;i++){
var opt=document.createElement(“OPTION”);
opt.text=a[i];
obj.add(opt);
}
}
</script>
<body>
Year: < select onchange = “send_request()” >
< option value = “0” > please select < / option >
<option value=”1″>1996-2006</option>
<option value=”2″>1986-1995</option>
<option value=”3″>1971-1985</option>
< option value = “4” > before 1970 < / option >
</select>
Subdirectory: < Select >
< option value = “0” > please select < / option >
</select>
</body>
</html>

Server side code:

Copy codeThe code is as follows:
<?php
header(‘Content-type: text/xml’);
$xml=”<?xml version=’1.0′ encoding=’GB2312′?>”;
$year = $_GET[“page”];
$content = $xml.”<contents>”;
if($year == “1”){
$content = $content.”<city>1</city><city>11</city></contents>”;
}
else if($year == ‘2’){
$content = $content.”<city>2</city><city>12</city></contents>”;
}
else if($year == ‘3’){
$content = $content.”<city>3</city><city>13</city></contents>”;
}
else if($year == ‘4’){
$content = $content.”<city>4</city><city>14</city></contents>”;
}
echo $content;
?>

Recommended Today

JVM + GC parsing (premise knowledge concatenation)

Premise preparation JVM GC garbage collection JVM virtual machine monitoring, tuning and troubleshooting Tomcat and microservice optimization 1. Premise review 1.1. JVM memory structure 1.1.1、 JVM Architecture Overview The gray part in the figure isThread private, there is almost no garbage collectionOrange partThread sharing, the main place where garbage recycling occurs What is the class […]