Ajax小案例之省市县三级联动

最新推荐文章于 2022-11-23 08:09:30 发布

Ron韦斯莱

最新推荐文章于 2022-11-23 08:09:30 发布

阅读量290

点赞数

本文链接：https://blog.csdn.net/qq_43537987/article/details/89220825

版权

需求：点击省找到对应的市县
提供两个接口：
链接：https://pan.baidu.com/s/1C4GGthqlrefBGZPrCMqHcg
提取码：dwso
后台接口使用：参数一：flag 用来区分选择的省市县（1.省2.市3.县）
参数二：选择省的时候传递pId,选择市的时候传递cId
效果展示：
在这里插入图片描述
代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>三级联动</title>
	<script src="./jquery-1.12.2.min.js"></script>
	<script>
	$(function(){
		//公共方法
		function queryDate(obj,callback){
			$.ajax({
				type:'get',
				url:'http://localhost/anli/select.php',
				data:obj,
				dataType:'json',
				success:function(data){
					callback(data);
				}
			});
		}
		//加载省的数据
		queryDate({
				flag:1,
				},function(data){
					var option = '';
					$.each(data,function(i,e){
						option += '<option value='+ e.id +'>'+ e.province + '</option>';
					})
					$("#province").append(option);
		});

		//加载市的数据

		$("#province").change(function(){
				$("#city").find("option:gt(0)").remove();
				queryDate({
				flag:2,
				pId:$(this).val()
				},function(data){
					var option = '';
					$.each(data,function(i,e){
						option += '<option value='+ e.id +'>'+ e.city + '</option>';
					})
					$("#city").append(option);
				});
		});
		//加载县的数据
		$("#city").change(function(){
				$("#county").find("option:gt(0)").remove();
				queryDate({
							flag:3,
							cId:$(this).val()
						},function(data){
							var option = '';
							$.each(data,function(i,e){
								option += '<option value='+ e.id +'>'+ e.county + '</option>';
							})
							$("#county").append(option);
						})
						
					});
		});
		
	</script>
</head>
<body>
	<!-- 后台接口使用：参数一：flag 用来区分选择的省市县（1.省2.市3.县）
	参数二：选择省的时候传递pId,选择市的时候传递cId -->
	<div id="container">
		<label for="">
			省：<select name="" id="province">
				<option value="">请选择省</option>
			</select>
		</label>
		<label for="">
			市：<select name="" id="city">
				<option value="">请选择市</option>
			</select>
		</label>
		<label for="">
			县：<select name="" id="county">
				<option value="">请选择县</option>
			</select>
		</label>

	</div>
</body>
</html>

Ron韦斯莱

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ajax小案例之省市县三级联动

需求：点击省找到对应的市县提供两个接口：链接：https://pan.baidu.com/s/1C4GGthqlrefBGZPrCMqHcg提取码：dwso后台接口使用：参数一：flag 用来区分选择的省市县（1.省2.市3.县）参数二：选择省的时候传递pId,选择市的时候传递cId效果展示：代码：<!DOCTYPE html><html lang="en"&...
复制链接

扫一扫