关于ajax的省级联动案例

最新推荐文章于 2022-10-23 23:19:09 发布

Seven_drunk

最新推荐文章于 2022-10-23 23:19:09 发布

阅读量119

点赞数

文章标签： ajax

本文链接：https://blog.csdn.net/Seven_drunk/article/details/89344627

版权

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<script>
  
 function getCities(){
	 function $(id){
	  return document.getElementById(id);
  }  
	 var xhr=new XMLHttpRequest();
	 xhr.open('post','b.php',true);
	 xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
	 var data="province="+$('sheng').value;
	 xhr.send(data);
	 xhr.onreadystatechange=function(){
		   if (this.readyState == 4) {
			   var myOption=document.createElement("option");
			   $('city').length=0;
			   var myOption=document.createElement("option");
			    myOption.innerText="---城市---"
			   $('city').appendChild(myOption);
			    var cities=xhr.responseXML.getElementsByTagName("city");
				  for(var i=0;i<cities.length;i++){
					  var myOption=document.createElement("option");
					  var city_name=cities[i].childNodes[0].nodeValue;
					   myOption.value=city_name;
					   myOption.innerText=city_name;
					$('city').appendChild(myOption);
				  }
		   }
		 }
		 
 }

</script>
<body>
  <select id="sheng" "getCities();">
    <option value="">---省---</option>
    <option value="zhejiang">浙江</option>
    <option value="jiangsu" >江苏</option>
    </select>
    <select id="city">
    <option value="">--城市--</option>
    </select>
</body>
</html>

<?php
header('Content-Type:text/xml;charset=utf-8');
header('Cache-Control:no-cache');
if(!empty($_POST)){
	$province=$_POST['province'];
}else{
	echo "province未获取到";
}
$info="";
if($province=="zhejiang"){
	    $info.="<province><city>杭州</city><city>宁波</city><city>苏州</city></province>";
	  }else if($province=="jiangsu"){
	    $info.="<province><city>南京</city><city>徐州</city><city>杭州</city></province>";
	  }
	  echo $info;

在这里插入图片描述

Seven_drunk

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
关于ajax的省级联动案例

<!doctype html><html><head><meta charset="utf-8"><title>无标题文档</title></head><script> function getCities(){ function $(id){ return documen...
复制链接

扫一扫