[thinkphp5.1]tp5.1一张表实现省市区三级联动的思路与过程

一张表实现省市区三级联动：
1.建立新的控制器和模型adders，并在模型中创建相应的查询方法，在控制器中调用这些方法并以json格式将数据返回到前台
模型中的方法逻辑：

<?php
namespace app\index\model;
use think\Model;
/**
*地址模型
*时间：2020.7.4
*作者：菜鸟涛涛
* 注： parent_id为查询数据的上级id
*     type 为省市区的级别 省——1  市——2  区——3
*比如  四川        id =1   type=1
*     四川成都     id=2    parent_id=1  type=2 
*     四川成都高新  id=3    parent_id=2  type=3 
*/
class Addres extends model
{         
//定义查询的表格
   protected $table='new_city'; 	
   //定义查询表主键
   protected $pk='id';

   //查询省
   public static function getconsignee(){
   return  self::where('type','1')->select();
   }
   
   // 查询市  
   public static function getcity($id=''){
   return  self::where(['type'=>'2','parent_id'=>$id])->select();
   }
   
  //查询区
  public static function district($id=''){
  return  self::where(['type'=>'3','parent_id'=>$id])->select();
  }
}
?>    

控制器引用模型并调用方法，且将数据json返回：

<?php
namespace app\index\controller;
use think\Db;
use app\index\model\Addres as Ad;
use think\facade\Request ;
/**
* 前台收货地址天剑值深市联动
* 作者：菜鸟涛涛
* 时间：2020.7.4
* 注：参数id为前端页面ajax抛过来的id
*/ 
class Addres extends Base
{      
	//省份查询
	public function add_addres(){
	$getconsignee=Ad::getconsignee();
	$this- >assign(['getconsignee'=>$getconsignee]);
	return $this->fetch();
	}
	
	//城市查询
	public  function getcity($id){
	$city=Ad::getcity($id);
	return json([
	'code'=>1,
	'msg'=>'ok',
	'data'=>$city]);   
	}
	
	//片区查询district
	public  function district($id){
	$district=Ad::district($id);
	return json([
	'code'=>1,
	'msg'=>'ok',
	'data'=>$district]);   
   }  
}

`前端页面
1，将前端页面省市区选项改成下拉框

	<select id="getconsignee">
	<option value="0">请选择省份<option>
	<option value="id">这是为了循环后台抛过来的数据<option>
	
	</select>
	
	<select id="city">
	<option value="0">请选择城市<option>
	</select>
	
	<select id="district">
	<option value="0">请选择区间<option>
	</select>

因为是以省份的数据根据完成的，所以省份有两对option，一对是无内容时的显示，一对是为了循环后台抛过来的数据
1.将后台查询的省份数据循环出来

 <select   id="getconsignee">
 <option value="0">请选择省份<option>
        {volist name="getconsignee" id="v"}
    <option value="{$v.id}">{$v.name}<option>
        {/volist}
  </select>

2，给省份select 添加id='getconsignee' 并添加change 事件

//省份改变事件
$('#getconsignee').change(function(){
	},'json')
})

3，一旦触发改变事件（即省份值发生改变），那么就拿到其id并发将id以ajax的形式发送到后台，并将其作为参数，传入下一级数据查询的方法中
前端ajax

$('#getconsignee').change(function(){
	var id=$(this).val();
	$.post('{:url("Addres/getcity")}',
	{id:id},function(res){             
	},'json')
})

将id传入下一级需要查询的数据方法

//城市查询
//$id 前台省数据ajax抛出的id
      public  function getcity($id){
         $city=Ad::getcity($id);
          return json([
          'code'=>1,
          'msg'=>'ok',
          'data'=>$city]);   
         }

4.查询出数据后，将数据在省级ajax的回调函数中进行循环拼接处理，并填充到相应的下拉框中

$('#getconsignee').change(function(){
	var id=$(this).val()；
	$.post('{:url("Addres/getcity")}',    
	{id:id},function(res){
	var str="";  //定义空变量储存组装数据  
	//将数据循环遍历并柱状  
	for(var i = 0; i < res.data.length; i++) {
       str+='<option value="'+res.data[i].id+'">'+res.data[i].name+'<option>';
       $("#city").html(str); //数据组装到下拉框
        }        
	},'json')
})

5.将以上change事件复制一份,按照同逻辑插叙出区，一张表实现省市联动就实现了

$('#city').change(function(){
var id=$(this).val();
$.post('{:url("Addres/district")}',{id:id},function(res){
   var str='';
   for (var i = 0; i < res.data.length; i++) {
   	str+='<option value="'+res.data[i].id+'">'+res.data[i].name+'<option>'
   }
   $('#district').html(str);
},'json')
})

总结：
1，建立相应的模型与控制器，模型中定义查询方法，控制器调用模型方法
2，将第一级数据查询出来并抛给页面，且将数据循环出来
3，给第一级的下拉框添加改变事件，并拿到id
4，将拿到的id以ajax的方式传递到控制器，并作为下一级的查询条件，查询出下一级数据，以json格式返还页面
5，在其上级ajax回调函数中定义一个空变量，并循环遍历组装数据，吧组装好的数据装在变量中，并将其填充到对应的下拉框中
6，查询二级的下级是，将二级看作一级，二级的下一级看作二级，循环以上操作

最终效果图

希望能够帮到有需要的朋友