[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"> ```