ThinkPHP + Layui 省、市、区三级联动
特别申明：不够完美，有BUG
1、数据表
链接：https://pan.baidu.com/s/17SHcihAi1Mzs047B3Aq1BA
提取码：1234
2、控制器：在controller 目录下面 新建一个 Shengshiqu.php 文件
3、文件代码如下：
<?php
declare (strict_types = 1);
namespace app\controller;
use think\facade\View;
use think\facade\DB;
use think\facade\Request;
class Shengshiqu
{
/**
* 显示资源列表
*
* @return \think\Response
*/
public function index()
{
if(request()->isGet()){
return View::fetch();
}else{
$area = DB::table('area')
->select();
return json(['code' =>0,'count'=>$count,'data' =>$area]);
}
}
public function treetable(){
return View::fetch();
}
//获取省份数据
public function getProvince(){
$province = DB::table('area')
->where('level',1)
->select();
return json(['code' => 0, 'data' => $province]);
}
// 接收前端 的 省份 id 获取城市数据
public function getCity(){
$provinceId =Request::param("provinceId");
$city = DB::table('area')
->where('pid',$provinceId)
->select();
return json(['code' => 0, 'data' => $city]);
}
// 接收前端 的 城市 id 获取 区/县数据
public function getArea(){
$cityId = Request::param("cityId");
$area = DB::table('area')
->where('pid',$cityId)
->select();
return json(['code' => 0, 'data'=>$area]);
}
}
4、在 View 文件夹下 新建 一个 Shengshiqu 的文件夹
5、在 Shengshiqu 文件夹 下面 新建一个index.html 文件
6、index.html文件代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="\static\layui\css\layui.css">
<title>Document</title>
</head>
<body>
<form class="layui-form" action="">
<div class="layui-form-item">
<label class="layui-form-label required">地区选择</label>
<div class="layui-input-inline" style="width: 100px;">
<select name="province" lay-verify="required" lay-filter="province">
</select>
</div>
<div class="layui-input-inline" style="width: 100px;">
<select name="city" lay-verify="required" lay-filter="city">
</select>
</div>
<div class="layui-input-inline" lay-filter="area" style="width: 100px;">
<select name="area" lay-verify="required">
</select>
</div>
</div>
<div class="layui-form-item">
<input type="submit" value="提交">
</div>
</form>
<table class="layui-table" id="area"></table>
<script src="\static\layui\layui.js"></script>
<script src="\static\jquery\jquery.js"></script>
<script>
layui.use(['form','table'],function(){
var form = layui.form;
var table = layui.table;
// 更新 "省份" 下拉框列表
getProvinces();
// 点击 "省份" 下拉框事件，更新 "城市" 下拉框下拉列表,移除区/县下拉数据
form.on('select(province)',function(e){
var provinceId = e.value;
getCitys(provinceId);
$('select[name=area]').children().remove();
});
// 点击 "城市" 下拉框事件，更新 "区/县" 下拉框下拉列表
form.on('select(city)',function(e){
var cityId = e.value;
getAreas(cityId);
});
// 获取省份数据
function getProvinces(){
$.get("/index.php/Shengshiqu/getProvince",function(e){
// 清空 name 等于 province 的 select 标签
$('select[name=province]').children().remove();
var Provinces = e.data;
for(var i=0;i<Provinces.length;i++){
// 创建一个 option 标签
let option = document.createElement("option");
// 设置 option 的属性
option.setAttribute("value", Provinces[i].id);
option.innerText = Provinces[i].shortname;
// 把option 标签 添加到 select 标签中
$('select[name=province]').append(option);
}
//渲染下拉框
form.render("select");
})
}
// 根据省份Id获取城市数据
function getCitys(provinceId){
$.get("/index.php/Shengshiqu/getCity",{provinceId:provinceId},function(e){
$('select[name=city]').children().remove();
var Citys = e.data;
for(var i=0;i<Citys.length;i++){
// 创建一个 option 标签
let option = document.createElement("option");
// 设置 option 的属性
option.setAttribute("value", Citys[i].id);
option.innerText = Citys[i].shortname;
// 把option 标签 添加到 select 标签中
$('select[name=city]').append(option);
}
//渲染下拉框
form.render("select");
})
}
// 根据城市Id获取县/区数据
function getAreas(cityId){
$.get("/index.php/Shengshiqu/getArea",{cityId:cityId},function(e){
$('select[name=area]').children().remove();
var Areas = e.data;
for(var i=0;i<Areas.length;i++){
// 创建一个 option 标签
let option = document.createElement("option");
// 设置 option 的属性
option.setAttribute("value", Areas[i].id);
option.innerText = Areas[i].shortname;
// 把option 标签 添加到 select 标签中
$('select[name=area]').append(option);
}
//渲染下拉框
form.render("select");
})
}
})
</script>
</body>
</html>