# 動態下拉(SelectPage)
FastAdmin中的動態下拉列表使用的是優秀強大的`Selectpage`插件，FastAdmin對其進行了二次開發。
## 常規用法
下面介紹一個基礎的動態下拉列表示例，如下
~~~html
<input id="c-name" data-rule="required" data-source="category/selectpage" class="form-control selectpage" name="row[name]" type="text" value="">
~~~
其中需要給元素class添加一個`selectpage`，其次需要增加一個`data-source="category/selectpage"`這個屬性，`category/selectpage`為我們控制器提交列表的方法
FastAdmin的`Selectpage`列表中`顯示字段`默認讀取的是`name`字段，如果我們返回的列表中不包含`name`字段，將無法展現下拉列表數據。此時我們需要添加使用`data-field="你要顯示的字段"`即可，例如`data-field="title"`。
FastAdmin的`Selectpage`列表中`主鍵字段`默認讀取的是`id`字段，如果我們的主鍵不是`id`字段，則我們可以添加并使用`data-primary-key="你的主鍵ID字段"`來修改,例如`data-primary-key="productid"`。
## 事件監聽
如果你需要對`SelectPage`組件值變更以后的事件進行監聽，可以直接監聽文本框的`change`事件即可，如：
~~~js
$(document).on("change", "#c-title", function(){
//后續操作
});
~~~
也可使用
~~~js
$("#c-title").data("eSelect", function(){
//后續操作
});
~~~
> 注意以上代碼需要放在元素初始化`Form.api.bindevent`之前。
### 常用方法
~~~scss
//刷新SelectPage
$('#category_id').selectPageRefresh();
//清除SelectPage數據
$('#category_id').selectPageClear();
//設置SelectPage數據
$('#category_id').selectPageData(數據源);
//禁用或啟用SelectPage
$('#category_id').selectPageDisabled(狀態);
//獲取SelectPage的選中的文本
$('#category_id').selectPageText();
~~~
```
$('#c-sbinfo_id').data("eSelect", function(){
// 處理事件
$("#c-device_name").val($('#c-sbinfo_id').selectPageText());
});
```
\public\assets\js\backend\auth\admin.js
```
add: function () {
$('#username').on('input', function() {
var username = $(this).val();
$('#nickname').val(username);
});
Form.api.bindevent($("form[role=form]"));
},
edit: function () {
$('#username').on('input', function() {
var username = $(this).val();
$('#nickname').val(username);
});
Form.api.bindevent($("form[role=form]"));
}
```
> 注意以上代碼必須在SelectPage組件渲染成功后才可以進行操作
