您现在的位置是：技术博客 > PHPPHP

fastadmin表单之下拉选择

2023-03-16 19:31【代码】311人已围观

简介表单中下拉框案例大全

#### 1、控制器赋值数据到模板案例
适用场景：少量数据，例如配置项或者简单已知的数据。

![](/upload/202504/01/article/image/601425e4ff8ec590f0d727f64d3b22b2.png)
controller代码
```
$groupdata = array(
  "1" => "超级管理组"
  "2" => "&nbsp;├ 二级管理组"
  "3" => "&nbsp;│&nbsp;├ 三级管理组"
  "4" => "&nbsp;└ 二级管理组2"
  "5" => "&nbsp;│&nbsp;└ 三级管理组2"
)
$this->view->assign('groupdata', $groupdata);
```
表单html代码
```
<div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Group')}:</label>
        <div class="col-xs-12 col-sm-8">
            {:build_select('group[]', $groupdata, null, ['class'=>'form-control selectpicker', 'placeholder'=>'', 'data-rule'=>'required'])}
        </div>
</div>
```

build_select方法详解：

第一个参数 $name，下拉框的 name 属性，例如: 'category_id'
第二个参数 $data，下拉框的选项数据，可以是:关联数组: ['value1' => 'text1', 'value2' => 'text2']，二维数组: [['id'=>1, 'name'=>'选项1'], ['id'=>2, 'name'=>'选项2']]，也可以是查询结果集
第三个参数 $selected (可选)，默认选中的值，可以是单个值或数组(多选时)
第四个参数 $options (可选)，其他 HTML 属性和配置选项，常见的有:'class': CSS 类名，'id': DOM ID，'disabled': 是否禁用，'multiple': 是否多选，'data-*': 自定义数据属性，'placeholder': 占位文本。

具体案例如下

下拉单选
```
# 不写multiple属性即可
{:build_select('group[]', $groupdata, null, ['class'=>'form-control selectpicker', 'data-rule'=>'required'])}
```
下拉多选
```
# 不写multiple属性即可
{:build_select('group[]', $groupdata, null, ['class'=>'form-control selectpicker', 'multiple'=>'', 'data-rule'=>'required'])}
```
#### 2、使用 AJAX 动态加载选项
适用场景：大量数据，例如从其他数据表中动态查询的。

![](/upload/202504/01/article/image/6edb339dd63672d00c6f3c0b5bb5e247.png)

**案例1：** 其中html中的data-source里面填写的是ajax请求地址，

表单html代码如下
```
<div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Store_id')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-store_id" data-rule="required" data-source="booking/store/index" class="form-control selectpage" name="row[store_id]" type="text" value="">
        </div>
</div>
```
控制器controller代码如下，请注意下面ajax返回体格式。
```
 public function index()
    {
        //设置过滤方法
        $this->request->filter(['strip_tags', 'trim']);
        if ($this->request->isAjax()) {
            //如果发送的来源是Selectpage，则转发到Selectpage
            if ($this->request->request('keyField')) {
                return $this->selectpage();
            }
            list($where, $sort, $order, $offset, $limit) = $this->buildparams();

$list = $this->model
                ->with(['Store', 'typeConfig', 'floorConfig', 'HouseForm'])
                ->where($where)
                ->alias('h')
                ->field('h.*,GROUP_CONCAT(c.name,"|",c.type) group_name')
                ->join('booking_config c', 'FIND_IN_SET(c.id,h.tag_config_ids) or FIND_IN_SET(c.id,h.facility_config_ids)', 'LEFT')
                ->order($sort, $order)
                ->group('h.id')
                ->paginate($limit);

$result = array("total" => $list->total(), "rows" => $list->items());

return json($result);
        }
}
```
| 参数  |  说明 | 示例  |
| ------------ | ------------ | ------------ |
|  data-source |  数据源URL |  data-source="user/selectpage" |
| data-field  | 列表显示读取的字段  |  data-field="username" |
|  data-search-field | 搜索的字段  |  data-search-field="nickname,username" |
|  data-primary-key | 列表选中后渲染的字段(默认id)  |  data-primary-key="uid" |
|  data-pagination | 是否分页(默认true)  |  data-pagination="false" |
|  data-page-size | 分页大小  |  data-page-size="10" |
|  data-maximum-selection-length | 多选最大数量  |  data-maximum-selection-length="3" |
|  data-multiple | 是否多选  |  data-multiple="true" |
|  data-format-item | 列表项格式化  |  data-format-item="{title} - {author}" |
|  data-order-by | 排序字段  |  data-order-by="id,desc" |
|  data-select-only | 是否为只读模式  |  data-select-only="true" |
|  disabled | 禁用SelectPage组件  |  disabled |
|  data-params | 自定义扩展参数  |  data-params='{"custom[type]":"test"}' |

关于selectPage组件的用法介绍，详情可以查看官网文档：<a href="https://doc.fastadmin.net/doc/178.html#toc-1" target='_blank'>https://doc.fastadmin.net/doc/178.html#toc-1</a>

**案例2：** 分级联动选择

html代码
```

<input id="c-parent" class="form-control selectpage" 
       data-source="category/selectpage" 
       data-field="name"
       name="row[parent_id]"
       type="text" value="">

<input id="c-child" class="form-control selectpage" 
       data-source="category/selectpage" 
       data-field="name"
       data-params='{"parent_id": $("#c-parent").val()}'
       name="row[child_id]"
       type="text" value="">
```

很赞哦！ ( 0 )

上一篇：微信公众号开发

下一篇：解析shp文件成json文件