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. Android内存管理（9）*MAT：Heap Dump,Shallow Heap,Retained Heap,Dominating Tree,GC Roots等的含义

    原文: http://help.eclipse.org/mars/index.jsp?topic=%2Forg.eclipse.mat.ui.help%2Fconcepts%2Fheapdump.ht ...

  2. Java Controller下兼容xls和xlsx且可识别合并单元格的excel导入功能

    1.工具类,读取单元格数据的时候,如果当前单元格是合并单元格,会自动读取合并单元格的值 package com.shjh.core.util; import java.io.IOException; ...

  3. OpenAMP简介

    通常在AMP(非对称多处理)配置中,会采用在不同的处理核上运行不同的软件环境并执行各自的代码程序,各核心之间通力合作实现处理器性能的提升.在AMP系统中,所谓的主处理器通常是指最先启动且主要负责管理其 ...

  4. enc28j60网卡驱动模块添加进linux内核，Kconfig，Makefile配置过程

    这里是要把http://www.cnblogs.com/hackfun/p/6260396.html中的enc28j60网卡驱动模块,添加到2.6.22.6内核中,这个模块代码不需要任何修改.只需要在 ...

  5. 亚马逊EC2构建代理服务器心血历程

    1.亚马逊上申请一台免费的EC2服务器,有相应的教程,绑定信用卡,预支付1美元,据说可以退回(防止到期后直接扣款,支付后通过修改卡信息,但好象有提示了,说卡不对了,也不管它了,到期后再说,美国人也不是 ...

  6. JS——绑定自定义属性

    1.绑定自定义属性: (1)元素节点.属性或元素节点[属性]绑定的属性不会出现在标签中,setAttribute可以出现在标签中. (2)setAttribute获取不到元素节点.属性形式绑定的属性值 ...

  7. nuxt https

    我用的模板是nxut-express,版本是:1.4.2.服务器:阿里云.一.申请免费证书:网站能通过https访问,首先得申请https证书,付费的阿里云上有售卖的,一年几千块.免费的可以通过cer ...

  8. 《Mysql - 到底可不可以使用 Join ?》

    一:Join 的问题? - 在实际生产中,使用 join 一般会集中在以下两类: - DBA 不让使用 Join ,使用 Join 会有什么问题呢? - 如果有两个大小不同的表做 join,应该用哪个 ...

  9. Eclipse调试DEBUG时快速查看某个变量的值的快捷键

    ctrl+shift+i

  10. 瑞芯微ROCK960 RK3399固件烧录总结

    1 下载固件 进入瑞芯微ROCK960下载主页 https://www.96boards.org/documentation/consumer/rock/downloads/ 选择os固件, Debi ...