# 动态下拉(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组件渲染成功后才可以进行操作
