JQ三级联动

		<div class="selCity">
			<select class="prov" name="province">
				<option value="">请选择</option>
			</select>
			<select class="city" name="city">
				<option value="">请选择</option>
			</select>
			<select class="area" name="area">
				<option value="">请选择</option>
			</select>
		</div>
		//请求地址
			var Province = "js/province.json",
				City = "js/city.json",
				Area = "js/area.json";
			function getInfo(url,callback){
				$.ajax({
					url:url,
					type:"get",
					success:function(res){
						callback(res);
					}
				})
			}
			//获取省份
			getInfo(Province,function callback(res){
				console.log(res);
				$(res).each(function(index,cur){
					var opt = $("<option value="+cur.id+">"+cur.name+"</option>");
					$(".prov").append(opt);
				})
			})
			//通过省份联动城市
			$(".prov").change(function(){
				var sel = $(".prov").find("option:selected").text();
				var selVal = $(".prov").find("option:selected").val();
				
				getInfo(City,function callback(res){
					console.log(res);
					$(res).each(function(index,cur){
						if(cur.preId == selVal){
//							console.log(cur.list);
							$(".city option").remove();
							$(cur.list).each(function(index,cur){
								var opt = $("<option value="+cur.id+">"+cur.name+"</option>");
								$(".city").append(opt);
							})
						}else if(selVal == ""){
							$(".city option").remove();
							var opt = $("<option value=''>请选择</option>");
							$(".city").append(opt);
						}
					})
					$(".city").change();
				})
				
			})
			//通过城市联动区
			$(".city").change(function(){
				var selValP = $(".prov").find("option:selected").val();
				var selValC = $(".city").find("option:selected").val();
				console.log(selValC);
				if(selValC == ""){
					$(".area option").remove();
					var opt = $("<option value=''>请选择</option>");
					$(".area").append(opt);
				}
				getInfo(Area,function callback(res){
					console.log(res);
					$(res).each(function(index,cur){
						if(cur.preId == selValP){
							console.log(cur);
							$(cur.list).each(function(index,curr){
								if(curr.preId == selValC){
									$(".area option").remove();
									$(curr.list1).each(function(index,cur){
										var opt = $("<option value="+cur.id+">"+cur.name+"</option>");
										$(".area").append(opt);
									})
								}
							})
						}
						
					})
				})
			})
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值