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. 6.10---springboot的配置

  2. iOS keychain入门

    学了很久的iOS,一直都是明文保存用户名和密码在本地,手机一般都是自己用的,而且非越狱手机东西也不怎么能拿到数据,所以也就没在乎那么多,当然,这是不科学的.悄悄的说,这块一直不是我写的~~~ 用户隐私 ...

  3. html5——拖拽

    基本情况 在HTML5的规范中,我们可以通过为元素增加draggable="true"来设置此元素是否可以进行拖拽操作,其中图片.链接默认是开启的. 拖拽元素 页面中设置了drag ...

  4. java攻城狮之路--复习JDBC

    1.JDBC中如何获取数据库链接Connection? Driver 是一个接口: 数据库厂商必须提供实现的接口. 能从其中获取数据库连接. 可以通过 Driver 的实现类对象获取数据库连接. 1. ...

  5. C# 后台按键 视频播放器 全屏后无法 触发

    第一种  (全屏不可触发) protected override bool ProcessCmdKey(ref System.Windows.Forms.Message msg, System.Win ...

  6. tp定时任务，传参问题

    <?phpnamespace app\command; use think\console\Command;use think\console\Input;use think\console\i ...

  7. fuel一键部署

    1. 所需物理主机的要求如下 内存:8GB+,推荐16GB: 磁盘:50GB+: 物理机OS:ubuntu-desktop-amd64 14.04(推荐) 或windows64位 物理机安装软件:安装 ...

  8. kesci---2019大数据挑战赛预选赛---情感分析

    一.预选赛题------文本情感分类模型 本预选赛要求选手建立文本情感分类模型,选手用训练好的模型对测试集中的文本情感进行预测,判断其情感为「Negative」或者「Positive」.所提交的结果按 ...

  9. mysql在windows上安装

    一.在window上安装mysql MySQL是一个小巧玲珑但功能强大的数据库,目前十分流行.但是官网给出的安装包有两种格式,一个是msi格式,一个是zip格式的.很多人下了zip格式的解压发现没有s ...

  10. 关于img的一个小知识点

    这两天在撸代码的时候发现图片的最下面总是会留一条空白,刚开始不知道为什么,但是UI拿刀对我说去掉它,瑟瑟发抖的我找了下原因及解决方案. 原因:img 是一个inline-block标签,而这个标签的v ...