AJAX二级菜单联动

最新推荐文章于 2019-09-11 21:20:48 发布

原创最新推荐文章于 2019-09-11 21:20:48 发布 · 348 阅读

CC 4.0 BY-SA版权

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ajax请求数据</title>
</head>
<body>
<select id="city">
<option>请选择</option>
</select>
<select id="citys">
<option>请选择</option>
</select>

<script>
var city=document.getElementById("city");
var citys=document.getElementById("citys");
window.onload=function(){
var xhr=getXhr();
xhr.open("get","city.php?flag=1");
xhr.send(null);
xhr.onreadystatechange=function(){
if (xhr.readyState==4&&xhr.status==200)
{
var data=xhr.responseText;
var arr=data.split(",");
// [安徽省,江苏省,山东省,河北]
for (var i=0;i<arr.length ;i++ )
{
var opt=new Option();
opt.innerHTML=arr[i];
city.appendChild(opt);
}
}
}
}
city.onchange=function(){
var len=citys.options.length;

for (var i=--len; i>0; i--)
{
citys.removeChild(citys.options[i]);
}

var xhr=getXhr();
/*xhr.open("get","city.php?flag=2&prov="+city.value);
xhr.send(null);*/
xhr.open("post","city.php");
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xhr.send("flag=2&prov="+city.value);
xhr.onreadystatechange=function(){
if (xhr.readyState==4&&xhr.status==200)
{
var data=xhr.responseText;
var arr=data.split(",");
for (var i=0;i<arr.length ;i++ )
{
var opt=new Option();
opt.innerHTML=arr[i];
citys.appendChild(opt);
}
}
}
}

function getXhr(){
var xhr=null;
if (window.XMLHttpRequest)
{
xhr=new XMLHttpRequest();
}else{
xhr=new ActiveXObject("Microsoft.XMLHttp");
}
return xhr;
}
</script>
</body>

</html>

php页面

<?php
$city=$_REQUEST["flag"];
if ($city==1){
echo "安徽省,山东省,河北省,江苏省";
}else{
$prov=$_POST["prov"];
switch ($prov)
{
case "安徽省":
echo "合肥市,安庆市,芜湖市,蚌埠市";
break;
case "山东省":
echo "济南,潍坊,青岛,兖州";
break;
case '河北省':
echo "保定,石家庄,秦皇岛,廊坊";
break;
case '江苏省':
echo "南京,宿州,宿迁,徐州";
break;

}

}

?>