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. unity多语言本地化

    简介 嗯...一般来说做游戏啥的都不会只发一个国家,但是每个国家语言不同,就存在多语言本地化的问题,然后直接用过一个通过xml完成本地化的东东,然后策划反馈不会修改xml,扔给我一个excel让我自己 ...

  2. MVC系列学习(十五)-验证码

    1.方式一: public class VCode { /// <summary> /// 生成验证码图片 字节数组 /// </summary> /// <return ...

  3. Razor的使用

    Razor可以识别尖括号,且关键词是@,默认情况下会对输出的html代码进行转义 1.C#代码 用 @ 加 中括号 包起来 @{ ; i < ; i++) { <h3>C#语句块要用 ...

  4. 警告视图及操作表单在xcode7.0中的使用

    警告视图(alert)及操作表单(action sheet)都用于向用户提供反馈.(模态视图) 操作表单:要求用户在两个以上选项之间做出选择.操作表单从屏幕底部出现,显示一系列按钮供用户选择.用户必须 ...

  5. 精美对UI设计界面赏析

    最美的UI设计界面赏析 . 喜欢就关注我吧

  6. [Android]异常7-Error:Configuration with name 'default' not found.

    背景:使用SVN更新代码,运行出现 异常原因: 可能一>缺少Modules 解决办法有: 解决一>Android Studio切换为Project,settings.gradle中引用和现 ...

  7. SQL练习题_用户购买收藏记录合并（拼多多）

    目录 拼多多笔试题0805_统计用户数据 笔试题描述 表格构建 数据观察 题目分析 一.合并表格 二.CASE表示(0,1) 三.同理复制FORK表 题目解答 拼多多笔试题0805_统计用户数据 笔试 ...

  8. Python三方库xlrd，xlwd-Excel读写

    恩,我是翻译汪,主要内容来自http://www.python-excel.org/ 在xlrd,xlwt这两个库中,Excel的结构表示为workbook整个Excel对象,sheet工作表,row ...

  9. @ResponseBody 返回中文乱码

    第一种解决方法:在@RequestMapping注解添加produces属性 @RequestMapping(value = "testPersonalValidtor.do",p ...

  10. CSS固定布局：960GS

    960栅格系统 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...