基于ajax、前后台的三级联动

在调用时才从后台取数据
从后台取数据时根据请求参数获得对应具体数据

前台:

<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style>
		select{
			width:200px;
			height:35px;
		}
	</style>
	
	<script src="jquery-3.4.1.js"></script>
</head>
<body>

	<span>省:</span>
	<select name="" id="" class="sheng">
		<option value="">请选择</option>
	</select>
	<span>市:</span>
	<select name="" id="" class="shi">
	</select>
	<span>区:</span>
	<select name="" id="" class="qu">
	</select>

	<script>

		var shengSelect=document.querySelector(".sheng");
		var shiSelect=document.querySelector(".shi");
		var quSelect=document.querySelector(".qu");


		var shengIndex=0;
		var shiIndex=0;

		//页面加载完成，发送ajax请求省数据,获得省下拉框填充内容
			(function(){
				var xhr=new XMLHttpRequest();
				xhr.onreadystatechange=function()
				{
					if(xhr.readyState==4)
					{
						if(xhr.status==200)
						{
							var shengList=JSON.parse(xhr.responseText);
							
							for(var i=0;i<shengList.length;i++)
							{
								var shengOption=new Option(shengList[i]);
								shengSelect.options.add(shengOption);
							}

						}
					}
				};
				//get请求传参,0省，1市，2区
				xhr.open('get','3.php?type=0',true);
				xhr.send(null);
			}());

		//选择省，加载市
		shengSelect.onchange=function(event)
		{	
				shengIndex=event.target.selectedIndex-1;
				var event=event||window.event;
				
				//获取市的数据
				var xhr=new XMLHttpRequest();
				xhr.onreadystatechange=function()
				{
					if(xhr.readyState==4)
					{
						if(xhr.status==200)
						{
							var shiList=JSON.parse(xhr.responseText);

	
							//在市的数据回来时执行,并且传参传入对应省的下标，返回对应下标数据
							if(shengIndex==-1)
								{
									console.log("请选择省");
									shiSelect.options.length=0;
									quSelect.options.length=0;
									
								}else{
									shiSelect.options.length=0;
									for(var i=0;i<shiList.length;i++)
									{
										var shiOption=new Option(shiList[i]);
										shiSelect.options.add(shiOption);
									}

									//获取区的数据，此时是为了选择市的时候，显示市所对应的第一个区
									
									var xhr2=new XMLHttpRequest()

									xhr2.onreadystatechange=function()
									{
										if(xhr2.readyState==4)
										{
											if(xhr2.status==200)
											{

												var quList=JSON.parse(xhr2.responseText);
												
												quSelect.options.length=0;
												for(var i=0;i<quList.length;i++)
												{
													var quOption=new Option(quList[i]);
													quSelect.options.add(quOption);

												}

											}
										}
									}
									xhr2.open('get','3.php?type=2&sheng='+shengIndex,true);
									xhr2.send(null);
							 	}


						 }
					}
				};
				//get请求传参,0省，1市，2市所对应第一个区,3区
				xhr.open('get','3.php?type=1&sheng='+shengIndex,true);
				xhr.send(null);
				


		
	}
		//选择市,加载区
		shiSelect.onchange=function(event)
		{
			shiIndex=event.target.selectedIndex;
			var xhr=new XMLHttpRequest();
			xhr.onreadystatechange=function()
			{
				if(xhr.readyState==4)
				{
					if(xhr.status==200)
					{
						var quList=JSON.parse(xhr.responseText);
						console.log(quList);
						quSelect.options.length=0;
						for(var i=0;i<quList.length;i++)
						{
							var quOption =new Option(quList[i]);
							quSelect.options.add(quOption);
						}

					}
				}
			}

			 

			xhr.open('get','3.php?type=4&sheng='+shengIndex+"&"+"shi="+shiIndex,true);
			xhr.send(null);
		}

	</script>
	
</body>

</html>

后台:

<?php

	$type=$_GET['type'];

	$shengList=['河北','黑龙江','哈尔滨'];
	$shiList=[['保定','石家庄'],['大庆','齐齐哈尔'],['尔滨','商丘']];
	$quList=[[['保定1','保定2'],["石1","石2"]],[["庆1","庆2","庆3"],["齐1","齐2"]],[["哈1","哈3"],["商丘1","商丘2"]]];


	if($type==0)
	{
		echo json_encode($shengList);
	}else if($type==1)
	{
		$shengIndex=$_GET['sheng'];
		echo json_encode($shiList[$shengIndex]);
	}else if($type==2){
		$shengIndex=$_GET['sheng'];
		echo json_encode($quList[$shengIndex][0]);
	}else{
		$shengIndex=$_GET['sheng'];
		$shiIndex=$_GET['shi'];
		echo json_encode($quList[$shengIndex][$shiIndex]);
	}
	
?>

神奇大叔

发布了252 篇原创文章 · 获赞 3 · 访问量 3262

私信关注

基于ajax、前后台的三级联动

猜你喜欢