韩顺平省级联动完成版 ajax

zhongchengl

于 2012-11-15 22:27:51 发布

阅读量634

点赞数 1

分类专栏： php

本文链接：https://blog.csdn.net/zhongchengl/article/details/8188860

版权

php 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

这是省市的联动由于没有找到县的数据所以只到了市的。由于遵循了mvc模式所以页面会多几个，这里贴上界面的代码，要看代码也是从这里开始看，至于数据库和其他代码，在下面提供的链接里面下载就可以了

完整代码数据库下载

<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<script type="text/javascript">
 
 
//创建ajax引擎
	function getXmlHttpObject(){
 
		var xmlHttpRequest;
		//不同的浏览器获取对象xmlhttprequest 对象方法不一样
		if(window.ActiveXObject){
 
			xmlHttpRequest=new ActiveXObject("Microsoft.XMLHTTP");
 
		}else{
 
			xmlHttpRequest=new XMLHttpRequest();
		}
 
		return xmlHttpRequest;
 
	}
 
	var myXmlHttpRequest="";
 
 
 
function getCities(){
 
	myXmlHttpRequest=getXmlHttpObject();
 
	if(myXmlHttpRequest){
		var x=$("sheng").selectedIndex;
   // alert(document.getElementsByTagName("option")[x].id);
 
 
		var cityid=document.getElementsByTagName("option")[x].id;
		//window.alert(cityid);
		var url="CityList.php";//post
		var data="city="+cityid;
 
		myXmlHttpRequest.open("post",url,true);//异步方式
 
		myXmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
 
		//指定回调函数
		myXmlHttpRequest.onreadystatechange=chuli;
 
		//发送
		myXmlHttpRequest.send(data);
	}
}
 
 
 
	function chuli(){
		if(myXmlHttpRequest.readyState==4){
 
			if(myXmlHttpRequest.status==200){
 
				//取出服务器回送的数据
 
				var cities=myXmlHttpRequest.responseXML.getElementsByTagName("city");
				var cityid=myXmlHttpRequest.responseXML.getElementsByTagName("cityid");
				//window.alert(cities.length);
				$('city').length=1;
 
				//遍历并取出城市
				for(var i=0;i<cities.length;i++){
 
					var city_name=cities[i].childNodes[0].nodeValue;
					var city_id=cityid[i].childNodes[0].nodeValue;
					//创建新的元素option
					var myOption=document.createElement("option");
					myOption.value=city_name;
					myOption.innerText=city_name;
					myOption.id=city_id;
					//添加到
					$('city').appendChild(myOption);
				}
			}
		}
	}
 
 
 
 
//获取省份
 
var myXmlHttpRequest2="";
function getProvinces(){
 
	 myXmlHttpRequest2=getXmlHttpObject();
 
	if(myXmlHttpRequest2){
 
		var url="showProvinces.php?mytime="+new Date();//post
 
 
		myXmlHttpRequest2.open("get",url,true);//异步方式
 
 
 
		//指定回调函数
		myXmlHttpRequest2.onreadystatechange=chuli2;
 
 
		//发送
		myXmlHttpRequest2.send(null);
 
	}
 
	}
 
 
 
 
function chuli2(){
 
 if(myXmlHttpRequest2.readyState==4){
 
			if(myXmlHttpRequest2.status==200){
 
				//取出服务器回送的数据
 
				/*var provids=myXmlHttpRequest2.responseXML.getElementsByTagName("provid");
				var provnames=myXmlHttpRequest2.responseXML.getElementsByTagName("provname");
				window.alert(provids.length);
 
				$('sheng').length=1;
             //window.alert(provids.length);
				//遍历并取出城市
				for(var i=0;i<provids.length;i++){
 
					var prov_name=provnames[i].childNodes[1].nodeValue;
					var prov_id=provids[i].childNodes[0].nodeValue;
					//创建新的元素option
					var myOption=document.createElement("option");
					myOption.value=prov_id;
					myOption.innerText=prov_name;
					//添加到
					$('sheng').appendChild(myOption);
				}
			}*/
 
 
			var res=myXmlHttpRequest2.responseText;
			//window.alert(res);
			var res_obj=eval("("+res+")");
			//window.alert(res_obj.length);
			for(var i=0;i<res_obj.length;i++){
			       var prov_name=res_obj[i].provname;
					var prov_id=res_obj[i].provid;
					//创建新的元素option
					var myOption=document.createElement("option");
					myOption.id=prov_id;
					myOption.innerText=prov_name;
					//添加到
					$('sheng').appendChild(myOption);
 
			}
			}
 }
 
 
}
	//这里我们写一个函数
	function $(id){
		return document.getElementById(id);
	}
 
</script>
</head>
<body  οnlοad="getProvinces()">
<select id="sheng" οnchange="getCities();">
    <option value="">---省---</option>
    </select>
    <select id="city">
    <option value="">--城市--</option>
    </select>
 
     <select id="county">
    <option value="">--县城--</option>
    </select>
 
</body>
</html>

zhongchengl

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
韩顺平省级联动完成版 ajax

这是省市的联动由于没有找到县的数据所以只到了市的。由于遵循了mvc模式所以页面会多几个，这里贴上界面的代码，要看代码也是从这里开始看，至于数据库和其他代码，在下面提供的链接里面下载就可以了完整代码数据库下载 //创建ajax引擎 function getXmlHttpObject(){ var xmlHttpRequest;
复制链接

扫一扫