# 多选下拉组件

# 概述

上一章节《单选下拉组件》中我们详细的介绍单选下拉组件的几种实现方式，本章节我们将进行扩展延伸，给大家介绍下多选下拉组件，在很多场景中我们都会使用到多选的情况，当然多选功能的实现多种多样，比如下面有一篇章节我们会开辟专门一个栏目进行《复选框组件》的介绍，这里我们不做过多的解读，言归正传，我们给大家剖析一下下拉多选组件，下面我们会重点给大家介绍下拉多选组件的形式、参数说明以及调用方式；

# 指定数据源

组件：{:widget('common/xmselect',array('productTags|1|商品标签|name|id',$tagsList,$info['productTags']))}
参数：name：productTags|1|商品标签|name|id

`productTags`：组件标识名称，此字段对应实体对象中的字段名称`productTags`;
`1`：这里的参数有`0和1`的区分，0表示不必填，1表示必填；
`商品标签`：这个文字会在初始化组件是控件的默认提示语，会动态解析为`请选择商品标签`
`name`：这个参数表示当我们动态获取数据源时(数据源带有参数`name`),会默认读取动态数据源中参数为`name`的值(此处用不到)；
`id`：这个参数表示当我们动态获取数据源时(数据源带有参数`id`),会默认读取动态数据源中参数为`id`的值(此处用不到)；

1
2
3
4
5

组件使用

那么我们如何在表单中使用下拉选择的组件呢，如下：

<form class="layui-form model-form" action="">
    <div class="layui-inline">
        <label class="layui-form-label">商品标签：</label>
        <div class="layui-input-inline">
          {:widget('common/xmselect',array('productTags|1|商品标签|name|id',$tagsList,$info['productTags']))}
        </div>
    </div>
</form>

1
2
3
4
5
6
7
8

效果展示：

# 下拉多选分组

在下拉多选模式中，上传我们阐述了普通的列表展示的形式，这种数据源的展示方式只适合同一级数据源的展示，如果数据源本身就是二级或者多级时，上述的展示形式就不太实用了，不然一二级的数据全部堆砌在一起，识别起来非常的吃力，而且用户的使用体验也特别的差，当前多层级数据源的下拉展示形式多种多样，后面有一个章节《下拉树组件》会重点详细的介绍多层级数据源的下拉呈现形式，这里我们不做太细的解读，我们重点来说下本章节中二级数据源如何进行分组展示同时又可以多选，即：分组下拉多选组件的实现与使用；

组件：{:widget('common/xmselect',array('menu_id|1|菜单选择|name|id|pid',$tagsList,isset($info['productTags']) ? $info['productTags'] : 0))}
参数：name：menu_id|1|菜单选择|name|id

`menu_id`：组件名称，此字段对应实体对象中的字段名称`menu_id`;
`1`：这里的参数有`0和1`的区分，0表示不必填，1表示必填；
`菜单选择`：这个文字会在初始化组件是控件的默认提示语，会动态解析为`请选择菜单选择`
`name`：这个参数表示当我们动态获取数据源时(数据源带有参数`name`),会默认读取动态数据源中参数为`name`的值；
`id`：这个参数表示当我们动态获取数据源时(数据源带有参数`id`),会默认读取动态数据源中参数为`id`的值；
`pid`：这个参数表示当我们动态获取数据源时(数据源带有参数`pid`),会默认读取动态数据源中参数为`pid`的值；

1
2
3
4
5
6

数据源形式如下：

编号(id)	名称(name)	上级ID(pid)
2	权限管理	1
201	物流中心	111
168	订单管理	110
161	店铺管理	142
143	商品管理	109
1	系统管理	0
136	会员管理	112
142	店铺管理	0
37	站点管理	1
109	商品管理	0
38	广告管理	1
110	订单管理	0
111	物流管理	0
39	布局管理	1
112	用户中心	0
73	配置管理	1
85	字典管理	1
219	消息管理	1
97	应用中心	1
155	系统工具	1

组件使用

那么我们如何在表单中使用下拉选择的组件呢，如下：

<form class="layui-form model-form" action="">
    <div class="layui-inline">
        <label class="layui-form-label">商品标签：</label>
        <div class="layui-input-inline">
            {:widget('common/xmselect',array('menu_id|1|菜单选择|name|id|pid',$tagsList,isset($info['productTags']) ? $info['productTags'] : 0))}
        </div>
    </div>
</form>

1
2
3
4
5
6
7
8

效果展示：

← 单选下拉组件日期组件 →