最近接了一个活，需要开发一个功能，用到的框架是laravel-admin，其中筛选需要做到联动，之前我们表单联动出现一个问题就是编辑的时候不会自动选上，筛选这里也是有同样问题，就是筛选后也不会联动，不过解决思路差不多类似，这里跟大家分享如何解决这个问题。

       我们先写一个接口，用来返回第二个select的选项，代码如下

#获取参数
$storeId = $request->input("q", 0);
#查询包间列表
$roomList = Room::where("store_id", $storeId)->get(['id', DB::raw('title as text')]);
#返回
return $roomList;

接口地址是api/store/getRoomList。

       然后我们在列表放两个select，并进行联动，同时我们需要在第二个select的回调里面处理一下筛选后填充的选项，不然的话，筛选后，第二个select是没有内容的。

#门店筛选
$filter->equal('store_id', '门店')->select(Store::all()->pluck('title', 'id'))->load('room_id', '/api/store/getRoomList');
#包间筛选
$filter->equal('room_id', '包间')->select(function () {
 //获取请求中的 store_id
 $storeId = request('store_id');
 //如果有选中的 room_id，加载该门店下的所有包间
 if($storeId){
  return Room::where('store_id', $storeId)->pluck('title', 'id');
 }
 //如果没有 store_id，返回空选项
 return [];
});

       最后我们通过js来控制，让他默认选上，代码如下

#JS调控
Admin::script("
  $(function () {
    // 当门店选择发生变化时
    $('select[name=\"store_id\"]').on('change', function () {
        let storeId = $(this).val();
        let roomSelect = $('select[name=\"room_id\"]');

        // 根据 storeId 获取房间列表并更新 roomSelect
        $.ajax({
            url: '/api/store/getRoomList',
            data: {q: storeId},
            success: function (data) {
                roomSelect.empty();
                $.each(data, function (id, title) {
                    roomSelect.append(new Option(title, id));
                });

                // 如果有默认选中的 room_id，则设置为选中状态
                let selectedRoomId = \"{{ request('room_id') }}\";
                roomSelect.val(selectedRoomId);
            }
        });
    });
  });          
");

这样我们就可以确保在筛选后第二个select会默认选上我们选择的选项，同时还能展示其他选项出来。

       不得不说，这个真的很坑。