TP5 三级联动实例 以及 原理、流程

这里还是拿省市区三级联动为例。

1. 首先下一个三级联动的数据表，结构如下：

   

字段说明：

id：地址的ID

pid：等于父级地址的 id ，用于识别该地点隶属于哪里

name: 地点名称

type：地点的级别，1是省，2是市，3是县/区

表名：tree

1. 在后台把所有一级地点（省）查询出来，并循环输出到前端第一个select框中

//查询所有省
	private function getProvince()
	{
		$province = db('tree')->where ([ 'pid'=>1])->select ();
		$this->assign('province',$province);
	}
           

前端省级select框

<select class="select" name="province" id="province" onchange="loadRegion('province',2,'city');">
		<option value="0" selected>省份/直辖市</option>
		{volist name="province" id="vo"}
				<option value="{$vo.id}">{$vo.name}</option>
		{/volist}
</select>
           

1. 给这个下拉框绑定一个onchange事件，用以触发下面的Ajax，并把需要的参数传给Ajax

三个参数：

province ： 是省级select框的ID

2：对应表中type字段，等于2的所有数据，即所有二级地点

city：市级select框的ID

同理，写下下面的市、县(区)的select下拉框：

<select class="select" name="city" id="city" onchange="loadRegion('city',3,'town');">
		<option value="0">市/县</option>
</select>

<select class="select" name="town" id="town">
		<option value="0">镇/区</option>
</select>
           

1. Ajax 向后台提交父级地点的 ID ，并接收在后台查询得到的 子级地点的 id 和 name，并把得来的值循环输出到子级的select框里面

<script type="text/javascript">
			function loadRegion(sel, type_id, selName) {
				$("#" + selName + " option").each(function() {
					$(this).remove();
				});
				$("<option value=0>请选择</option>").appendTo($("#" + selName));
				if($("#" + sel).val() == 0) {
					return;
				}
				$.ajax({
					url: "{:url('index/Index/getRegion')}",
					type: 'GET',
					data: {
						pid: $("#" + sel).val(),
						type: type_id
					},
					dataType: "json",
					success: function(data) {
						if(data) {
							$.each(data, function(idx, item) {
								$("<option value=" + item.id + ">" + item.name + "</option>").appendTo($("#" + selName));
							});
						} else {
							$("<option value='0'>请选择</option>").appendTo($("#" + selName));
						}
					}
				});
			}
	</script>
           

后台的 getRegion 方法：

public function getRegion()
	{
		$map['pid']=input("pid");
		$map['type']=input("type");
		$list=db("tree")-> where($map)->select();
		echo json_encode($list);
	}