thinkphp5+mysql 二表实现二级联动

二级联动是指第一个下拉框选择一个选项后，第二个下拉框会根据第一个下拉框的选项显示相应的选项。在ThinkPHP 5和MySQL中实现二级联动可以按照以下步骤进行：

1. 创建两个数据表，例如表A和表B，表A中存储一级分类信息，表B中存储二级分类信息。表B中需要有一个外键关联表A的主键。

2. 在模型中定义关联关系，例如在表A对应的模型中定义hasMany关联关系，表示一个一级分类可以对应多个二级分类；在表B对应的模型中定义belongsTo关联关系，表示一个二级分类属于一个一级分类。

3. 在控制器中处理请求，获取一级分类的选项，并根据选项查询对应的二级分类，将查询结果传递给模板。

4. 在模板中使用JavaScript监听一级分类选项的变化，当选项变化时向服务器发送请求获取对应的二级分类选项，并更新第二个下拉框的选项。

具体的实现代码可以参考以下示例：

// 在表A对应的模型中定义hasMany关联关系
namespace app\index\model;

use think\Model;

class CategoryA extends Model
{
    protected $hasMany = ['CategoryB'];
}

// 在表B对应的模型中定义belongsTo关联关系
namespace app\index\model;

use think\Model;

class CategoryB extends Model
{
    protected $belongsTo = ['CategoryA'];
}

// 在控制器中处理请求
namespace app\index\controller;

use app\index\model\CategoryA;
use think\Controller;

class Category extends Controller
{
    public function index()
    {
        // 获取一级分类的选项
        $categoryAList = CategoryA::select();

        // 根据选项查询对应的二级分类
        $categoryBList = [];
        if (!empty($_GET['category_a_id'])) {
            $categoryAId = intval($_GET['category_a_id']);
            $categoryBList = CategoryB::where('category_a_id', $categoryAId)->select();
        }

        // 将查询结果传递给模板
        $this->assign('categoryAList', $categoryAList);
        $this->assign('categoryBList', $categoryBList);

        return $this->fetch();
    }
}

// 在模板中使用JavaScript监听一级分类选项的变化
<select name="category_a_id" id="category_a_select">
    <option value="">请选择一级分类</option>
    {foreach $categoryAList as $categoryA}
    <option value="{$categoryA->id}">{$categoryA->name}</option>
    {/foreach}
</select>

<select name="category_b_id" id="category_b_select">
    <option value="">请选择二级分类</option>
    {foreach $categoryBList as $categoryB}
    <option value="{$categoryB->id}">{$categoryB->name}</option>
    {/foreach}
</select>

<script>
    var categoryASelect = document.getElementById('category_a_select');
    var categoryBSelect = document.getElementById('category_b_select');

    categoryASelect.addEventListener('change', function() {
        var categoryAId = categoryASelect.value;
        if (categoryAId) {
            // 向服务器发送请求获取对应的二级分类选项
            var xhr = new XMLHttpRequest();
            xhr.open('GET', '/category/index?category_a_id=' + categoryAId);
            xhr.onreadystatechange = function() {
                if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
                    // 更新第二个下拉框的选项
                    var categoryBList = JSON.parse(xhr.responseText);
                    categoryBSelect.innerHTML = '<option value="">请选择二级分类</option>';
                    categoryBList.forEach(function(categoryB) {
                        categoryBSelect.innerHTML += '<option value="' + categoryB.id + '">' + categoryB.name + '</option>';
                    });
                }
            };
            xhr.send();
        } else {
            categoryBSelect.innerHTML = '<option value="">请选择二级分类</option>';
        }
    });
</script>

在以上示例代码中，我们使用了JavaScript监听一级分类选项的变化，并向服务器发送请求获取对应的二级分类选项。服务器返回的二级分类选项使用JSON格式表示，客户端使用JSON.parse将其解析为数组，并根据数组更新第二个下拉框的选项。