# 动态下拉
FastAdmin中的动态下拉列表使用的是优秀强大的`Selectpage`插件来支持，FastAdmin对其进行了二次开发。
下面介绍一个最基础的动态下拉列表示例，如下
```
<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="你要显示的字段"`即可。
FastAdmin的Selectpage列表中`主键字段`默认读取的是`id`字段，如果我们的主键不是`id`字段，则我们可以添加并使用`data-primary-key="你的主键ID字段"`来修改。
Selectpage所支持的扩展属性
| 属性 | 功能 | 示例 |
| --- | --- | --- |
| data-source | 提供数据源的URL地址 | data-source="category/index" |
| data-field | 列表显示读取的字段 | data-field="username" |
| data-primary-key | 列表选中后渲染的字段 | data-primary-key="uid" |
| data-pagination | 是否开启分页 | data-pagination="true" |
| data-page-size | 分页大小 | data-page-size="10" |
| data-multiple | 是否支持多选 | data-multiple="true" |
| data-max-select-limit | 最多可选择数量 | data-max-select-limit="3" |
| data-order-by | 排序字段 | data-order-by="id" |
| data-params | 自定义扩展参数 | data-params='{"custom\[type\]":"test"}' |
| data-select-only | 是否为只读模式 | data-select-only="true" |
Selectpage的`data-params`支持`function`类型,如果需要动态传参(例如联动查询),则可以在JS中将`data-params`添加一个function处理即可
FastAdmin在生成CRUD时会对包含下划线的字段默认生成动态下拉列表，比如`user_id`将自动生成`data-source="user/index"`
默认读取的是`id`和`name`字段，如果需要修改，请参考上方的参数修改方法。
data-params自定义扩展参数支持使用function动态返回数据，请在表单初始化之前使用，例如传递动态选择的类型
```
$("#c-name").data("params", function (obj) {
return {custom: {type: $("#c-type").val()}};
});
```
# **普通下拉**
在FastAdmin中集成了`Bootstrap-select`插件，可以对原有的`select`元素重新渲染，并增加相应的功能。
我们可以直接给`select`元素添加一个class为`selectpicker`的值即可，FastAdmin在检测到以后会自动进行渲染，我们同时可以给`select`添加以下属性用于配置`selectpicker`
| 属性 | 介绍 | 添加位置 | 示例 |
| --- | --- | --- | --- |
| data-live-search | 是否启用动态搜索 | select | data-live-search="true" |
| data-tokens | 添加搜索的关键字 | option | data-tokens="keyword keyword2" |
| data-max-options | 最大可选择option的数量 | select或optgroup | data-max-options="2" |
| title | 自定义默认提示语 | select | title="请选择相应的分类" |
| title | 自定义选中以后显示的文字 | option | title="分类1" |
| data-style | 定义样式 | select | data-style="btn-primary" |
> 更多的使用方法请参考：[Selectpicker官方教程](https://silviomoreto.github.io/bootstrap-select/)
