AJAX 二级级联菜单实现代码
程序员文章站
2022-06-17 14:14:03
客户端代码： 复制代码 代码如下:
客户端代码：
<!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>无标题文档</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>
年份：<select id="year" onchange="send_request()">
<option value="0">请选择</option>
<option value="1">1996-2006</option>
<option value="2">1986-1995</option>
<option value="3">1971-1985</option>
<option value="4">1970以前</option>
</select>
子目录:<select id="name">
<option value="0">请选择</option>
</select>
</body>
</html>
服务器端代码：
<?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;
?>
复制代码 代码如下:
<!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>无标题文档</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>
年份：<select id="year" onchange="send_request()">
<option value="0">请选择</option>
<option value="1">1996-2006</option>
<option value="2">1986-1995</option>
<option value="3">1971-1985</option>
<option value="4">1970以前</option>
</select>
子目录:<select id="name">
<option value="0">请选择</option>
</select>
</body>
</html>
服务器端代码：
复制代码 代码如下:
<?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;
?>
下一篇： Flutter路由框架Fluro使用简介