js解析xml数据实现省市县连级查询（地址的选择）

最新推荐文章于 2021-05-26 01:13:24 发布

FYANGFEI

最新推荐文章于 2021-05-26 01:13:24 发布

阅读量420

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/FYANGFEI/article/details/81210797

版权

js 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

1。xml文件点击此处下载

jquery.js文件（自己网上下载）

Apache服务器（环境搭建配置自行设置）

2.效果图

Apache端口号一般为8080或者80，这里我自己修改端口了

3.实现代码

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<script type="text/javascript" src="jq.js"></script>
<body>
	
	<select name="" id="">
		<option value="-1">--请选择--</option>
	</select>
	<select name="" id="">
		<option value="-1">--请选择--</option>
	</select>
	<select name="" id="">
		<option value="-1">--请选择--</option>
	</select>
	<script type="text/javascript">
		
		var xmlDom = null;

		var $sels = $('select');

		$.ajax({
            //此处写自己的地址
			url:'http://localhost:8810/demo/ChinaArea.xml',

			dataType:'xml',

			success:function(res){

				//console.log(res);

				xmlDom = res;
                
				var $prov = $(xmlDom).find('province');

				$prov.each(function(i,v){

					var op = $('<option value="'+$(this).attr('provinceID')+'">'+$(this).attr('province')+'</option>'
					);

					op.appendTo($sels.eq(0));

				})
			},

			error:function(){

				console.log('请求失败');
			}

		})

		$sels.eq(0).change(function(){

			// val 代表省的id

			$(this).next().empty().html('<option value="-1">--请选择--</option>');

			var val = $(this).val();

			var $prov = $(xmlDom).find('province[provinceID='+val+']');

			var $cities = $prov.find('City');

			//console.log($cities);

			$cities.each(function(i,v){

				console.log(11111);

				var $op = $('<option value="'+$(this).attr('CityID')+'">'+$(this).attr('City')+'</option>') ;

				$op.appendTo($sels.eq(1));

			})

		})

	</script>
</body>
</html>

FYANGFEI

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js解析xml数据实现省市县连级查询（地址的选择）

1。xml文件点击此处下载 jquery.js文件（自己网上下载） Apache服务器（环境搭建配置自行设置）2.效果图Apache端口号一般为8080或者80，这里我自己修改端口了3.实现代码&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF...
复制链接

扫一扫