最简单的三级联动

最近研究了一下联动原理，大多数联动都是通过ajax实现的，其实就是通过ajax把页面数据传给后台，在不刷新页面的情况下，改变下拉框的值。话不多说上代码讲解：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试页面</title>
<script type="text/javascript" src="jquery-3.3.1.min.js">
</script>
<script type="text/javascript">
	var sheng;
	function fun(){
		sheng=$("#sheng").val();
		$.get("sheng.php",{sheng:sheng},
		function (data){
			$("#shi").html(data);
		});
	}
	function fun2(){
		var shi=$("#shi").val();
		$.get("shi.php",{shi:shi,sheng:sheng},
		function (data){
			$("#qu").html(data);
		});
	}
</script>
</head>
<body>
	<select id="sheng" onchange="fun()">
		<option value="">请选择省份</option>
		<option value="1">山东</option>
		<option value="2">河北</option>
	</select>
	<select id="shi" onchange="fun2()">
		<option>请选择市</option>
	</select>
	<select id="qu">
		<option value="">请选择区</option>
	</select>
</body>
</html>

这是HTML和jQuery的部分，为了让大家明白，我现在讲解一下jQuery的$.get()方法。
他有三个参数：
第一个参数是发送请求的URL地址，在这里也就是sheng.php和shi.php；
第二个参数是需要传的值，要用{}包裹起来，格式为{变量名：变量}，传多个值{变量名1：变量值1，变量名2：变量值2}；
第三个参数是需要调用的方法，其中括号里的 data 不是传参，而是返回值，是URL地址运行后返回来的值。（注：val()是jQuery中来获取value的函数，html()是jQuery中用来获取元素值的函数）

下面来看一下PHP代码

<?php
	//这里是sheng.php
	$sheng=$_GET['sheng'];
	if($sheng=="1"){
		echo "<option>请选择</option><option value='1'>淄博市</option><option value='2'>泰安市</option>";
	}
	if($sheng=="2"){
		echo "<option>请选择</option><option value='1'>石家庄市</option><option value='2'>唐山市</option>";
	}


<?php
	//这里是shi.php
	$sheng=$_GET['sheng'];
	$shi=$_GET['shi'];
	if($sheng=="1"){
		if($shi=="1"){
			echo "<option>请选择</option><option value='1'>张店区</option><option value='2'>桓台区</option>";
		}
		if($shi=="2"){
			echo "<option>请选择</option><option value='1'>泰山区</option><option value='2'>岱岳区</option>";
		}
	}
	if($sheng=="2"){
		if($shi=="1"){
			echo "<option>请选择</option><option value='1'>长安区</option><option value='2'>桥东区</option>";
		}
		if($shi=="2"){
			echo "<option>请选择</option><option value='1'>丰南区</option><option value='2'>丰润区</option>";
		}
	}

因为用的是get（）方法，所以是get接收。因为只是讲解一下方法，所以在此我不在演示从数据库中调取数据。值得注意的是，在PHP中只有echo出的数据，才会被jQuery中的get方法中的data所接收。

想要用post方法，只要把所有get替换即可正常运行。

posted @ 2018-11-16 11:20  打死小强  阅读(157)  评论(0)  编辑  收藏  举报