FastAdmin实现SelectPage的联动

需求如下图，选择城市后，城市的值做为下面几个selectpage参数

在对应的js文件添加下面的代码，下面是已add为例

        add: function () {
            // 动态绑定筛选参数到地铁
            $('#c-quyu_ditie_ids').data('params', function (obj) {
                // 获取当前选择的区域ID值
                var areaId = $('#c-area_id').val();
 
                return {
                    // 这里的字段名需要根据你的后端接口要求来定
                    // 通常格式是 custom[字段名]
                    custom: {
                        area_id: areaId  // 将区域ID作为筛选参数
                    }
                };
            });
            // 动态绑定筛选参数到机场车站
            $('#c-quyu_jichang_ids').data('params', function (obj) {
                // 获取当前选择的区域ID值
                var areaId = $('#c-area_id').val();
 
                return {
                    // 这里的字段名需要根据你的后端接口要求来定
                    // 通常格式是 custom[字段名]
                    custom: {
                        area_id: areaId  // 将区域ID作为筛选参数
                    }
                };
            });
            // 景点
            $('#c-quyu_jingdian_ids').data('params', function (obj) {
                // 获取当前选择的区域ID值
                var areaId = $('#c-area_id').val();
 
                return {
                    // 这里的字段名需要根据你的后端接口要求来定
                    // 通常格式是 custom[字段名]
                    custom: {
                        area_id: areaId  // 将区域ID作为筛选参数
                    }
                };
            });
            //商圈
            $('#c-quyu_shangquan_ids').data('params', function (obj) {
                // 获取当前选择的区域ID值
                var areaId = $('#c-area_id').val();
 
                return {
                    // 这里的字段名需要根据你的后端接口要求来定
                    // 通常格式是 custom[字段名]
                    custom: {
                        area_id: areaId  // 将区域ID作为筛选参数
                    }
                };
            });
 
            //学校
            $('#c-quyu_xuexiao_ids').data('params', function (obj) {
                // 获取当前选择的区域ID值
                var areaId = $('#c-area_id').val();
 
                return {
                    // 这里的字段名需要根据你的后端接口要求来定
                    // 通常格式是 custom[字段名]
                    custom: {
                        area_id: areaId  // 将区域ID作为筛选参数
                    }
                };
            });
            //医院
            $('#c-quyu_yiyuan_ids').data('params', function (obj) {
                // 获取当前选择的区域ID值
                var areaId = $('#c-area_id').val();
 
                return {
                    // 这里的字段名需要根据你的后端接口要求来定
                    // 通常格式是 custom[字段名]
                    custom: {
                        area_id: areaId  // 将区域ID作为筛选参数
                    }
                };
            });
 
            // （可选）监听区域ID变化时刷新SelectPage
            $('#c-area_id').on('change', function () {
                // 获取SelectPage实例
                $('#c-quyu_ditie_ids').selectPageClear();
                $('#c-quyu_jichang_ids').selectPageClear();
                $('#c-quyu_jingdian_ids').selectPageClear();
                $('#c-quyu_shangquan_ids').selectPageClear();
                $('#c-quyu_xuexiao_ids').selectPageClear();
                $('#c-quyu_yiyuan_ids').selectPageClear();
            });
            Controller.api.bindevent();
        },

截图对应的html

    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Area_id')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-area_id"  data-field="mergename" data-params='{"custom[level]":"2"}' data-order-by="id"  data-rule="required" data-source="area/index" class="form-control selectpage" name="row[area_id]" type="text" value="">
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Address')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-address" class="form-control" name="row[address]" type="text" value="">
            <button type="button" class="btn btn-primary" data-toggle='addresspicker' data-input-id="c-address" data-lng-id="c-lng" data-lat-id="c-lat">点击选择地址获取经纬度</button>
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Lng')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-lng" class="form-control" name="row[lng]" type="text"  value="">
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Lat')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-lat" class="form-control" name="row[lat]" type="text"  value="">
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Quyu_ditie_ids')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-quyu_ditie_ids" data-rule="" data-source="quyu/ditie/index" data-multiple="true" class="form-control selectpage" name="row[quyu_ditie_ids]" type="text" value="">
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Quyu_jichang_ids')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-quyu_jichang_ids" data-rule="" data-source="quyu/jichang/index" data-multiple="true" class="form-control selectpage" name="row[quyu_jichang_ids]" type="text" value="">
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Quyu_jingdian_ids')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-quyu_jingdian_ids" data-rule="" data-source="quyu/jingdian/index" data-multiple="true" class="form-control selectpage" name="row[quyu_jingdian_ids]" type="text" value="">
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Quyu_shangquan_ids')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-quyu_shangquan_ids" data-rule="" data-source="quyu/shangquan/index" data-multiple="true" class="form-control selectpage" name="row[quyu_shangquan_ids]" type="text" value="">
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Quyu_xuexiao_ids')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-quyu_xuexiao_ids" data-rule="" data-source="quyu/xuexiao/index" data-multiple="true" class="form-control selectpage" name="row[quyu_xuexiao_ids]" type="text" value="">
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Quyu_yiyuan_ids')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-quyu_yiyuan_ids" data-rule="" data-source="quyu/yiyuan/index" data-multiple="true" class="form-control selectpage" name="row[quyu_yiyuan_ids]" type="text" value="">
        </div>
    </div>