<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-controlselectpage"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-controlselectpage"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`）。
---
###
本文介绍在FastAdmin框架中如何正确配置动态下拉列表，确保在add.html和edit.html页面中能够正常显示下拉框内容。通过具体代码示例，详细解释了所需属性的添加方法。
扫一扫
608
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
