首页 > 代码库 > 多级联动系列——ajax调用XML实现三级联动

多级联动系列——ajax调用XML实现三级联动

2024-07-05 05:11:56   218人阅读

微笑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=http://www.mamicode.com/"./jquery/jquery.js"></script>>
OK，就是这样的。根据这个三级联动，可以扩展N级联动。原理都是一样的。好了，就到这里了。微笑


联系
我们