[TOC] #### 1. 前言 --- FastAdmin 中的动态下拉列表使用的是优秀强大的 [Selectpage](https://terryz.github.io/selectpage/index.html "Selectpage") 插件，FastAdmin 对其进行了二次开发 这个插件适合用于下拉框数据较多时，比如: 发布文章时选择哪个用户发布的。并且支持下拉多选，非常实用 更多用法参考 [FastAdmin 官方文档](https://doc.fastadmin.net/doc/178.html) #### 2. 常规用法 --- 基础用法: 给表单元素的 class 添加一个 `selectpage`，然后再添加一个 `data-source` 属性提供数据源 ```html <input id="c-name" class="form-control selectpage" data-source="category/selectpage"> ```  #### 3. 常用属性 --- | 属性 | 功能 | | ------------ | ------------ | | data-source | 提供数据源的 URL 地址或 JSON 数据 | | data-field | 自定义显示字段，默认为 name | | data-primary-key | 自定义主键字段，默认为 id | | data-params | 自定义扩展参数 | #### 4. 数据源 --- `data-source` 支持 `Object` 和 `远程URL` 返回两种方式，如： ``` // Object data-source='[{"id":"1","name":"标题1"},{"id":"2","name":"标题2"}]' // 远程URL data-source="category/selectpage" ``` 当使用 `远程URL` 的方式时需要远程返回 JSON 数据，如： ```json // 其中 list 为数据列表, total 为总记录数，总记录数将用于前端显示分页使用 {"list":[{"id":1,"name":"admin"},{"id":2,"name":"liang"}],"total":30} ``` `Selectpage` 列表中显示字段默认是 `name`，主键字段默认是 `id` ```html <!-- data-field 自定义显示字段、data-primary-key 自定义主键字段 --> <input data-source="category/selectpage" data-field="title" data-primary-key="value"> ```