<think>我们正在讨论如何在
FastAdmin中生成动态
下拉框字段。根据之前的知识，我们知道
FastAdmin的一键CRUD功能会根据
字段名自动生成表单控件。对于动态
下拉框，通常涉及外键
字段（以`_id`结尾的
字段）或需要异步加载数据的
字段。关键点：1.
FastAdmin会自动将后缀为`_id`的
字段识别为外键，并尝试生成一个下拉选择框。2.但是，默认生成的
下拉框是静态的（在编辑页面生成
时加载一次），如果我们需要动态
下拉框（例如，根据另一个
下拉框的值变化而变化），则需要额外的处理。下面我们分两种情况讨论：###情况一：静态
下拉框（外键
关联）对于普通的外键
字段，
FastAdmin在生成CRUD
时已经自动生成了
下拉框，并且
下拉框的选项是在页面加载
时从
关联表中获取的。例如，如果有一个
字段`category_id`，则
FastAdmin会生成如下代码：```html<divclass="form-group"><labelclass="control-labelcol-xs-12col-sm-2">CategoryID:</label><divclass="col-xs-12col-sm-8"><selectid="c-category_id"class="form-controlselectpicker"name="row[category_id]"data-rule="required"><optionvalue="">请选择</option><?phpforeach($categoryListas$item):?><optionvalue="<?phpecho$item['id'];?>"<?phpif($row['category_id']==$item['id']):?>selected<?phpendif;?>><?phpecho$item['name'];?></option><?phpendforeach;?></select></div></div>```这需要我们在控制器中查询
关联表的数据并赋值到视图。###情况二：动态
下拉框（联动
下拉框）当我们希望一个
下拉框的值改变
时，另一个
下拉框的选项也随之改变，就需要使用动态
下拉框。
FastAdmin内置了`
selectpage`和`cxselect`两个插件来处理联动。####方法一：使用`
selectpage`插件（推荐）1.在生成CRUD
时，对于需要动态
下拉框的
字段，我们可以将其设置为`
selectpage`类型。2.在
数据库设计
时，如果
字段名为`category_id`，
FastAdmin默认会将其识别为外键并生成下拉选择，但是默认是静态的。我们可以通过修改生成的JS文件来使用`
selectpage`动态加载。示例步骤：假设我们有两个表：省份表（fa_province）和城市表（fa_city），城市表中有一个
字段`province_id`
关联省份。现在我们在用户表中有一个
字段`province_id`（省份）和`city_id`（城市），我们希望选择省份后，城市
下拉框动态加载该省份下的城市。1.在生成CRUD的命令中，我们正常生成用户表的CRUD。2.在生成之后，我们需要修改编辑视图（edit.html）和添加视图（add.html）中关于城市
字段的代码，将`city_id`的
下拉框改为使用`
selectpage`，并设置联动参数。修改`add.html`和`edit.html`中`city_id`
字段的表单项：```html<divclass="form-group"><labelclass="control-labelcol-xs-12col-sm-2">城市:</label><divclass="col-xs-12col-sm-8"><!--使用
selectpage插件，并且设置data-source为城市数据接口，同
时设置data-dependent为省份
字段--><inputid="c-city_id"class="form-control
selectpage"name="row[city_id]"type="text"value="{$row.city_id|default=''}"data-source="city/index"data-field="name"data-primary-key="id"data-rule="required"data-dependent="province_id"></div></div>```说明：-`data-source`:数据源URL，这里我们指向城市控制器的方法，该方法需要返回城市列表（支持搜索和分页）。-`data-field`:
显示在输入框中的
字段（城市名称）。-`data-primary-key`:城市表的主键。-`data-dependent`:依赖的
字段名，即省份
字段。当省份
字段改变
时，会重新加载城市数据，并将`province_id`作为参数传递给`data-source`。3.在城市的控制器（City.php）中，我们需要编写`index`方法，根据省份ID参数返回城市列表。注意：这个方法需要支持
FastAdmin的`
selectpage`插件的参数格式。示例方法：```phppublicfunctionindex(){//获取
selectpage请求参数$provinceId=$this->request->param('province_id');$search=$this->request->param('search');$page=$this->request->param('page');//构建查询$where=[];if($provinceId){$where['province_id']=$provinceId;}if($search){$where['name']=['like',"%{$search}%"];}$list=\think\Db::name('city')->field('id,name')->where($where)->page($page,10)->select();$count=\think\Db::name('city')->where($where)->count();returnjson(['total'=>$count,'list'=>$list]);}```####方法二：使用`cxselect`插件如果不需要搜索分页，可以使用`cxselect`插件实现简单联动。示例：1.在表单中，我们将两个
下拉框分别设置为省份和城市：```html<divclass="form-group"><labelclass="control-labelcol-xs-12col-sm-2">省份:</label><divclass="col-xs-12col-sm-8"><selectid="c-province_id"class="form-control"name="row[province_id]"data-rule="required"data-url="{:url('province/getList')}"><optionvalue="">请选择</option><?phpforeach($provinceListas$item):?><optionvalue="<?phpecho$item['id'];?>"><?phpecho$item['name'];?></option><?phpendforeach;?></select></div></div><divclass="form-group"><labelclass="control-labelcol-xs-12col-sm-2">城市:</label><divclass="col-xs-12col-sm-8"><selectid="c-city_id"class="form-controlcxselect"name="row[city_id]"data-rule="required"data-url="{:url('city/getList')}"data-quick-field="province_id"data-quick-url="{:url('city/getListByProvince')}"><optionvalue="">请先选择省份</option></select></div></div>```2.在JS中初始化`cxselect`（通常在页面底部）：```
javascript$(function(){$('#c-province_id').cxSelect({selects:['province_id','city_id'],url:['',//第一级不需要url，因为已经静态生成了'{:url("city/getList")}'//第二级的URL，实际上这里我们不会这样用，因为cxselect适用于多级联动],emptyStyle:'none',required:true});});```但实际上，对于两级联动，我们更推荐上面的`
selectpage`方法，因为`cxselect`在
FastAdmin中不是特别常用。总结：-静态
下拉框：直接使用外键
字段，生成CRUD
时会自动生成。-动态
下拉框（联动）：*使用`
selectpage`插件，设置`data-dependent`属性实现联动。*或者使用`cxselect`插件，但需要自己编写较多的代码。根据实际需求选择，一般情况下，`
selectpage`更灵活。注意事项：1.使用`
selectpage`插件
时，注意数据源接口返回的数据格式必须符合`
selectpage`插件的要求（有`total`和`list`）。2.联动
下拉框的依赖
字段（如`province_id`）在表单中必须存在，且其值改变
时会触发城市
字段重新加载。###示例代码总结（使用
selectpage实现省市联动）1.在
数据库设计用户表
时，有
字段`province_id`和`city_id`。2.生成CRUD后，修改城市
字段（`city_id`）的表单控件为：```html<inputid="c-city_id"class="form-control
selectpage"name="row[city_id]"type="text"data-source="city/index"data-field="name"data-primary-key="id"data-dependent="province_id"data-rule="required">```3.在`City`控制器中，创建`index`方法（如上代码）。4.注意：省份
字段（`province_id`）可以正常使用静态
下拉框（在控制器中查询所有省份并赋值到视图），这样当省份选择变化
时，城市
字段会自动重新加载。这样，我们就实现了动态
下拉框（联动）效果。如果还有疑问，可以参考
FastAdmin官方文档中的[动态下拉列表](https://doc.
fastadmin.net/docs/
selectpage.html)部分[^1]。---###§§相关问题§§1.如何在
FastAdmin中实现三级联动
下拉框（省市区）？2.
FastAdmin中
下拉框如何实现搜索功能？3.如何自定义
selectpage插件返回数据的格式？</think>
###
FastAdmin中动态
下拉框字段生成方法及示例
在
FastAdmin中生成动态
下拉框字段通常需要结合两种技术：**
字段命名规范** + **自定义插件集成**。以下是具体实现方法：
#### 一、基础实现（外键
字段自动映射）
```php
//
数据库字段设计
category_id INT(11) COMMENT '分类ID' // 注意_id后缀
```
FastAdmin会自动识别该
字段为外键：
1. 在CRUD生成
时会自动创建下拉选择框
2. 下拉选项来自
关联表
```html
<!-- 自动生成的表单控件 -->
<select name="row[category_id]" class="form-control selectpicker">
<?php foreach ($categoryList as $item): ?>
<option value="<?= $item['id'] ?>"><?= $item['name'] ?></option>
<?php endforeach; ?>
</select>
```
#### 二、动态
下拉框进阶实现（AJAX联动）
```php
//
数据库字段设计
province_id INT(11) COMMENT '省份ID' // 一级选择
city_id INT(11) COMMENT '城市ID' // 二级联动
```
1. **控制器扩展**：
```php
// application/admin/controller/Demo.php
public function city()
{
$provinceId = $this->request->param('province_id');
$list = CityModel::where('province_id', $provinceId)->select();
return json(['list' => $list]);
}
```
2. **JS动态绑定**：
```
javascript
// public/assets/js/backend/demo.js
$(function() {
// 监听省份变化
$('#c-province_id').change(function() {
$.post("demo/city", {province_id: $(this).val()}, function(res) {
var options = '<option value="">请选择</option>';
$.each(res.list, function(i, item) {
options += '<option value="'+item.id+'">'+item.name+'</option>';
});
$('#c-city_id').html(options).selectpicker('refresh');
});
});
});
```
3. **表单视图定制**：
```html
<!-- application/admin/view/demo/add.html -->
<div class="form-group">
<label>省份</label>
<select id="c-province_id" name="row[province_id]"
class="form-control selectpicker"
data-rule="required">
<?php foreach ($provinceList as $item): ?>
<option value="<?= $item['id'] ?>"><?= $item['name'] ?></option>
<?php endforeach; ?>
</select>
</div>
<div class="form-group">
<label>城市</label>
<select id="c-city_id" name="row[city_id]"
class="form-control selectpicker"
data-rule="required">
<option value="">请先选择省份</option>
</select>
</div>
```
#### 三、特殊场景处理（非外键动态下拉）
```php
status TINYINT(1) COMMENT '状态' // 非_id结尾
字段
```
1. **使用FormBuilder扩展**：
```php
// 控制器中构建表单
$form = FormBuilder::getInstance();
$form->select('status', '状态')
->options(function() {
return [0 => '禁用', 1 => '启用', 2 => '审核中'];
});
```
2. **JS动态更新选项**：
```
javascript
// 根据其他
字段值更新选项
$('#c-type').change(function() {
var type = $(this).val();
var options = {
1: {0:'待处理', 1:'进行中'},
2: {0:'已关闭', 1:'已完成', 2:'已归档'}
};
Form.api.selectoptions('status', options[type]);
});
```
#### 四、注意事项
1.
字段命名规范：
- 外键
字段必须包含 `_id` 后缀
- 动态下拉的
关联字段应在同一表单内
2. 性能优化：
```php
// 避免N+1查询问题
$this->model->with(['province', 'city'])->select();
```
3. 常见报错处理：
- **"_id
字段不能为空"**：检查
关联表数据是否存在
- **"下拉选项不更新"**：清除
FastAdmin的JS缓存（`public/assets/js/backend`）
> 动态
下拉框实现的核心是结合
FastAdmin的`selectpicker`组件和AJAX数据交互[^1]。对于复杂场景，推荐使用官方`
selectpage`插件（文档：`https://doc.
fastadmin.net/docs/
selectpage.html`）。
---
###
扫一扫
1525
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
