Thinkphp 三级联动

最新推荐文章于 2023-05-20 17:39:46 发布

风尘文少

最新推荐文章于 2023-05-20 17:39:46 发布

阅读量245

点赞数

CC 4.0 BY-SA版权

分类专栏： Thinkphp 文章标签： ajax json thinkphp

本文链接：https://blog.csdn.net/u012314507/article/details/103916605

Thinkphp 专栏收录该内容

5 篇文章

订阅专栏

本文详细介绍了如何在ThinkPHP框架中实现省市区三级联动选择器的功能。通过自定义控制器SjController，结合数据库操作和AJAX技术，实现了从省到市再到区的动态数据加载，为用户提供流畅的地区选择体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Thinkphp 三级联动

数据库部分

请看本文资源

后台部分

这边我将会用全新的控制器
命名为SjController
这里需要使用我提供的伪静态文件
伪静态文件传送门

<?php
namespace Home\Controller;
use Think\Controller;
class SjController extends Controller {
	//获取省和直辖市
    public function index(){
		$listObj = M('region');
		$whereprovince['top_parentid'] = 0;
        $whereprovince['status'] = 1;
		$listprovince = $listObj->where($whereprovince)->select();
        $bottom_list = M('bottom_list')->where(array('status'=> 1))->order('sort')->select();
        $this->assign("province_list",$listprovince);
        $this->assign(array(
            'bottom_list' => $bottom_list,
        ));
        $this->display();
    }
	//获取地级市
	public function get_citys(){
		$listObj = M('region');
		$where['top_parentid'] = I('province_id');
		$where['level'] = 2;
		$list = $listObj->where($where)->select();
		$data=array('status'=>0,'city'=>$list);
		header("Content-type: application/json");
		exit(json_encode($data));
	}
	//获取地级县
	public function get_district(){
		$listObj = M('region');
		$where['parent_id'] = I('city_id');
		$where['level'] = 3;
		$list = $listObj->where($where)->select();
		$data=array('status'=>0,'district'=>$list);
		header("Content-type: application/json");
		exit(json_encode($data));
	}
}

html部分ajax

<script>
	$("#province_id").change(function(){
	var province_id=$(this).val();
	$.ajax({
		url:'/Agent/get_citys/',
		Type:"POST",
		data:"province_id="+province_id,
		dataType:"json",
		success:function(data){
			var city = data.city;
			var option=$("<option></option>");
			$(option).val("0");
			$(option).html("请选择");
			var option1=$("<option></option>");
			$(option1).val("0");
			$(option1).html("请选择");
			$("#city_id").html(option);
			$("#district_id").html(option1);
			for(var i in city){
				var option=$("<option></option>");
				$(option).val(city[i]['region_id']);
				$(option).html(city[i]['region_name']);
				$("#city_id").append(option);
			}
		}
		
	});
});
</script>
<script>
	$("#city_id").change(function(){
		var city_id=$(this).val();
		$.ajax({
			url:'/Agent/get_district',
			Type:"POST",
			data:"city_id="+city_id,
			dataType:"json",
			success:function(data){
				var district = data.district;
				var option=$("<option></option>");
				$(option).val("0");
				$(option).html("请选择");
				$("#district_id").html(option);
				for(var i in district){
					var option=$("<option></option>");
					$(option).val(district[i]['region_id']);
					$(option).html(district[i]['region_name']);
					$("#district_id").append(option);
				}
			}
		});
	});
</script>