首页 > 代码库 > 多级联动系列——ajax调用XML实现三级联动

多级联动系列——ajax调用XML实现三级联动

技术分享ajax 使用起来特别的方便,再也不操心浏览器兼容问题了。用ajax调用XML页面中的内容,来生成三级联动,OK废话不多说,跟着我一步步写吧。

首先写一个XML文件。data.xml

<?xml version="1.0" encoding="UTF-8"?

> <list> <province name="河南" id=‘1‘> <city name="焦作" id=‘11‘> <area id=‘111‘>武陟</area> <area id=‘112‘>博爱</area> <area id=‘113‘>修武</area> </city> <city name="郑州" id=‘12‘> <area id=‘121‘>金水区</area> <area id=‘122‘>二七区</area> <area id=‘123‘>中原区</area> </city> </province> <province name="河北" id=‘2‘> <city name="石家庄" id=‘21‘> <area id=‘211‘>赵县</area> <area id=‘212‘>正定</area> <area id=‘213‘>平山</area> </city> <city name="承德" id=‘22‘> <area id=‘221‘>围场</area> <area id=‘222‘>丰宁</area> <area id=‘223‘>隆化</area> </city> </province> <province name="山东" id=‘3‘> <city name="青岛" id=‘31‘> <area id=‘311‘>李沧</area> <area id=‘312‘>崂山</area> <area id=‘313‘>黄岛</area> </city> <city name="日照" id=‘32‘> <area id=‘321‘>东港</area> <area id=‘322‘>岚山</area> <area id=‘323‘>五莲</area> </city> </province> </list>


然后就要用ajax调用XML  生成三级联动 了

以下是代码部分

<!DOCTYPE html>
<html>
	<head>
		<title>八部天龙</title>
		<meata http-equiv="contetn-type" content="text/html;charset=utf-8" />
		<script type="text/javascript" src="http://www.mamicode.com/jquery/jquery.js"></script>
		<script type="text/javascript">
			var xnlOb;
			$(document).ready(function(){
				$.get("data.xml",null,funciton(re){
					xmlOb=$(re);//把文档对象转化为选择器对象
					//開始获取全部的province标签
					var pOb=xmlOb.find("province");
					var pName,pId;
					$("[name=‘province‘]").append("<option value=http://www.mamicode.com/‘0‘>请选择");
					pOb.each(function(){
						pName=$(this).attr(‘name‘);
						//alert(pName);
						pId=$(this).attr(‘id‘);
						$("[name=‘province‘]").append("<option value=http://www.mamicode.com/‘"+pId+"‘>"+pName+"</option>");
					})
				},‘xml‘);
			})
			function getCity(){
				//首先获取选择的省份的名字 一级分类中
				var pValue=http://www.mamicode.com/$("[name=‘province‘]>:selected").text();
				$("[name=‘city‘]").empty();//清空是为了防止多选几次出现的多次加入反复内容
				$("[name=‘city‘]").append("<option value=http://www.mamicode.com/‘0‘>请选择");
				//然后接着找省下的城市
				xmlOb.find("province[name=‘"+pValue+"‘]").find("city").each(function(){
					$("[name=‘city‘]").append("<option value=http://www.mamicode.com/‘"+$(this).attr(‘id‘)+"‘>"+$(this).attr(‘name‘)+"</option>");
				});
			}
			function getArea(){
				var cValue=http://www.mamicode.com/$("[name=‘city‘]>:selected").text();
				$("[name=‘area‘]").empty();
				$("[name=‘area‘]").append("<option value=http://www.mamicode.com/‘0‘>请选择");
				//接着去XML中找市以下的县(区)
				xnlOb.find("city[name=‘"+cValue+"‘]").find(‘area‘).each(function(){
					$("[name=‘area‘]").append("<option value=http://www.mamicode.com/‘"+$(this).attr(‘id‘)+"‘>"+$(this).text()+"</option>");
				});
			}
		</script>
		<body>
			<select name="province" onchange="getCity();"></select>
			<select name="city" onchange="getArea();"></select>
			<select name="area"></select>
		</body>
	</head>
</html>

OK。就是这种。

依据这个三级联动。能够扩展N级联动。

原理都是一样的。

好了,就到这里了。技术分享

技术分享

多级联动系列——ajax调用XML实现三级联动