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="./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='0'>请选择</option>");

					pOb.each(function(){

						pName=$(this).attr('name');

						//alert(pName);

						pId=$(this).attr('id');

						$("[name='province']").append("<option value='"+pId+"'>"+pName+"</option>");

					})

				},'xml');

			})

			function getCity(){

				//首先获取选择的省份的名字 一级分类中

				var pValue=$("[name='province']>:selected").text();

				$("[name='city']").empty();//清空是为了防止多选几次出现的多次加入反复内容

				$("[name='city']").append("<option value='0'>请选择</option>");

				//然后接着找省下的城市

				xmlOb.find("province[name='"+pValue+"']").find("city").each(function(){

					$("[name='city']").append("<option value='"+$(this).attr('id')+"'>"+$(this).attr('name')+"</option>");

				});

			}

			function getArea(){

				var cValue=$("[name='city']>:selected").text();

				$("[name='area']").empty();

				$("[name='area']").append("<option value='0'>请选择</option>");

				//接着去XML中找市以下的县（区）

				xnlOb.find("city[name='"+cValue+"']").find('area').each(function(){

					$("[name='area']").append("<option value='"+$(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级联动。

原理都是一样的。

好了，就到这里了。

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcGhwNTkyMQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">

多级联动系列——ajax调用XML实现三级联动的更多相关文章

  1. 使用PHP+MySql+Ajax+jQuery实现省市区三级联动功能

    使用PHP+MySql+Ajax+jQuery实现省市区三级联动功能 要求:写一个省市区(或者年月日)的三级联动,实现地区或时间的下拉选择. 实现技术:php ajax 实现:省级下拉变化时市下拉区下 ...

  2. 用php+mysql+ajax+jquery做省市区三级联动

    要求:写一个省市区(或者年月日)的三级联动,实现地区或时间的下拉选择. 实现技术:php ajax 实现:省级下拉变化时市下拉区下拉跟着变化,市级下拉变化时区下拉跟着变化. 使用chinastates ...

  3. 【2017-06-06】Ajax完整结构、三级联动的制作

    一.Ajax完整结构 $.ajax({ url:"Main.ashx", data:{}, dataType:"json", type:"post&q ...

  4. ajax练习习题二三级联动

    异步执行 1数据传输收发数据的时候不用等待对方接受,可以继续发送 2Ajax 在调用处理页面处理数据的时候,下面的代码可以继续执行,效率高 同步执行 1收发数据的时候要等到对方接受的成功,才可以继续发 ...

  5. ajax加php实现三级联动

    js代码 <script type="text/javascript">    function get_next(t,pid){  //当前元素的id,当前optio ...

  6. 如何用jquery+ajax写省市区的三级联动？（封装和不封装两种方式）-----2017-05-14

    首先,要实现如下图效果, 1.要理清思路: 先做出三个下拉菜单----根据第一个下拉菜单的value值获取第二个下拉列表的内容,第三个同理. 2.用到的数据库表:Chinastates表 规律:根据国 ...

  7. Ajax做无刷新三级联动

    1.引入JS and Jquery包 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...

  8. ajax 城市区域选择三级联动

    <body onLoad="sheng()"><div class="xqbody">    <form action=" ...

  9. Ajax省市地区下拉列表三级联动

    SQL数据库表 --创建Province表 CREATE TABLE [dbo].[Province]( [Id] [int] NULL, [Name] [varchar](50) NULL, [or ...

随机推荐

  1. Wannafly挑战赛19 A-队列Q

    题目描述 ZZT 创造了一个队列 Q.这个队列包含了 N 个元素,队列中的第 i 个元素用 Qi 表示.Q1 表示队头元素,QN 表示队尾元素.队列中的元素是 N 的一个全排列. ZZT 需要在这个队 ...

  2. no斜体 背景图片坐标

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. 将npm修改为cnpm

    1.更改npm的源地址 检测是否更改成功 2.用cnpm代替npm npm常用命令: npm更新:npm install -g npm npm初始化生成package.json:   npm init ...

  4. git——merge和rebase的区别

    参考http://www.jianshu.com/p/129e721adc6e 我在公司里看到其他同事都使用git pull --rebase拉取远程代码,而我总是用git pull,也有同事和我说过 ...

  5. 背包系列 hdu3449 有依赖背包

    这道题真正困扰了笔者3,4天,冥思苦想几日无果之后,只能去找大牛的解法.结合网上的大牛解法与自己的理解,笔者终于解决了这个坑了,在此小庆幸一下. 原题如下: Consumer Time Limit: ...

  6. CloseableHttpClient 在使用过程中遇到的问题

    代码是前辈写的,在对代码进行压测的时候遇到了个问题,最大线程是 不能超过setDefaultMaxPerRoute设置的数字,一点超过 就会死掉.这里会报错 connection pool shut ...

  7. 开发日记(项目中SQL查询的优化)

    今天发现自己之前写的一些SQL查询在执行效率方面非常不理想,于是尝试做了些改进. 需求为查询国地税表和税源表中,国税有而税源没有的条目数,之前的查询如下: SELECT COUNT(NAME)     ...

  8. Python操作数据库及hashlib模块

    一.hashlib模块 hashlib模块,主要用于加密相关的操作,在python3的版本里,代替了md5和sha模块,主要提供 SHA1, SHA224, SHA256, SHA384, SHA51 ...

  9. PHP连接mysql8.0出错“SQLSTATE[HY000] [2054] The server requested authentication method unkno…

    今天安装安装一个叫得推校园O2O系统的使劲都说连接不上服务器. 下面是安装说明,我直接进行3步骤,导入数据库配置文件,结果就显示题目报错的内容 安装说明: 直接输入程序目录即可 http://loca ...

  10. 最小生成树算法Kruskal详解

    要讲Kruskal,我们先来看下面一组样例. 4 5 1 2 3 1 4 5 2 4 7 2 3 6 3 4 8 14 画出来更直观一些,就是上面的这张图. 智商只要不是0的(了解最小生成树是什么的童 ...