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：EditText属性大全

    一.inputType属性inputType属性在EditText输入值时启动的虚拟键盘的风格有着重要的作用.比如有时需要虚拟键盘只为字符或只为数字. <span style="fon ...

  2. GitLab Runner and CICD

    # Linux x86-64 sudo wget -O /usr/local/bin/gitlab-runner https://gitlab-runner-downloads.s3.amazonaw ...

  3. iOS CoreData 开发之数据模型关系

    接着上一篇,上一篇中,我们简单的实现了一个用户实体,本次添加一个用户信息实体,与用户实体相关联,关系为1:1. 新建一个实体UserInfo:

  4. 关闭掉eclipse启动的自动更新功能(提高打开eclipse的速度)

  5. Java编译器、JVM、解释器

    Java虚拟机(JVM)是可运行Java代码的假想计算机.只要根据JVM规格描述将解释器移植到特定的计算机上,就能保证经过编译的任何Java代码能够在该系统上运行.本文首先简要介绍从Java文件的编译 ...

  6. Caffe：导入caffePython-PyQt failed

    在另一台电脑上使用caffe python版本,显示 Backend Qt5Agg is interactive backend. Turning interactive mode on.       ...

  7. 注解是建立在class文件基础上的东西，同C语言的宏有异曲同工的效果

    注解是建立在class文件基础上的东西,同C语言的宏有异曲同工的效果 https://www.cnblogs.com/deman/p/5519901.html @是java注解,即annotation ...

  8. C#斐波那契数列方法

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...

  9. Swift 3到5.1新特性整理

    本文转载自:https://hicc.me/whats-new-in-swift-3-to-5-1/,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有. Hipo 2.0 重写从 Swif ...

  10. awk 新手入门笔记

    转自:http://www.habadog.com/2011/05/22/awk-freshman-handbook/ awk新手入门笔记 @作者 : habadog@邮箱 : habadog1203 ...