[TOC] #### 1. 前言 --- FastAdmin 中的動(dòng)態(tài)下拉列表使用的是優(yōu)秀強(qiáng)大的 [Selectpage](https://terryz.github.io/selectpage/index.html "Selectpage") 插件，F(xiàn)astAdmin 對(duì)其進(jìn)行了二次開(kāi)發(fā) 這個(gè)插件適合用于下拉框數(shù)據(jù)較多時(shí)，比如: 發(fā)布文章時(shí)選擇哪個(gè)用戶發(fā)布的。并且支持下拉多選，非常實(shí)用 更多用法參考 [FastAdmin 官方文檔](https://doc.fastadmin.net/doc/178.html) #### 2. 常規(guī)用法 --- 基礎(chǔ)用法: 給表單元素的 class 添加一個(gè) `selectpage`，然后再添加一個(gè) `data-source` 屬性提供數(shù)據(jù)源 ```html <input id="c-name" class="form-control selectpage" data-source="category/selectpage"> ```  #### 3. 常用屬性 --- | 屬性 | 功能 | | ------------ | ------------ | | data-source | 提供數(shù)據(jù)源的 URL 地址或 JSON 數(shù)據(jù) | | data-field | 自定義顯示字段，默認(rèn)為 name | | data-primary-key | 自定義主鍵字段，默認(rèn)為 id | | data-params | 自定義擴(kuò)展參數(shù) | #### 4. 數(shù)據(jù)源 --- `data-source` 支持 `Object` 和 `遠(yuǎn)程URL` 返回兩種方式，如： ``` // Object data-source='[{"id":"1","name":"標(biāo)題1"},{"id":"2","name":"標(biāo)題2"}]' // 遠(yuǎn)程URL data-source="category/selectpage" ``` 當(dāng)使用 `遠(yuǎn)程URL` 的方式時(shí)需要遠(yuǎn)程返回 JSON 數(shù)據(jù)，如： ```json // 其中 list 為數(shù)據(jù)列表, total 為總記錄數(shù)，總記錄數(shù)將用于前端顯示分頁(yè)使用 {"list":[{"id":1,"name":"admin"},{"id":2,"name":"liang"}],"total":30} ``` `Selectpage` 列表中顯示字段默認(rèn)是 `name`，主鍵字段默認(rèn)是 `id` ```html <!-- data-field 自定義顯示字段、data-primary-key 自定義主鍵字段 --> <input data-source="category/selectpage" data-field="title" data-primary-key="value"> ```