# formSelects

**Repository Path**: source/formSelects

## Basic Information

- **Project Name**: formSelects
- **Description**: 基于https://github.com/hnzzmsf/layui-formSelects的支持layui的多选下拉表单控件新增了分页异步加载数据的功能
更多详情可参考原作者的文档。
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 14
- **Created**: 2018-08-24
- **Last Updated**: 2020-12-18

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# formSelects

#### 项目介绍
基于 https://github.com/hnzzmsf/layui-formSelects 的支持layui的多选下拉表单控件：新增了分页异步加载数据的功能
更多详情使用文档可参考原作者的文档。

这里只说明添加的功能。



#### 安装教程

1. 引用formSelects-v4.css与formSelects-v4.modify.css
2. 引用formSelects-v4.1.js

#### 使用说明

1. 分页加载功能：

![输入图片说明](https://images.gitee.com/uploads/images/2018/0807/142701_d96e11a7_432156.png "QQ截图20180807142634.png")

```

<select id="industry_category_select"  name="industryCategory" xm-select-search=""  lay-verify="required" xm-select-radio="" 
  placeholder="行业" autocomplete="off" xm-select-height="36px" xm-select-skin="normal" xm-select="industry_category_select" lay-filter="industry_category_select" >
  <option value="">请选择行业类别</option>
</select>
						    
<script>
layui.formSelects.data('industry_select',"server", {
    url: '/industryList',
    showPage: true,
    size: 6,
    paramMap: {
        page: "page",
        size: "rows",
        keyword: "room_name_like"
    },
    initValues: '#(detail.room_id)'?['#(detail.room_id)']:null,
    beforeSuccess: function(id, searchUrl, inputValue, res){
        // 转义成formSelects识别的数据结构
        let data = [];
        if(res&&res.success){
            for(var i=0;i<res.data.length;i++){
                data.push({name: res.data[i].room_name, value:res.data[i].room_id});
            }
            res.code = 0;
            res.msg = "加载成功!";
            res.data = data;
        }
        return res;
    }
});
</script>
```

2.级联异步加载功能

![输入图片说明](https://images.gitee.com/uploads/images/2018/0807/142733_677c24e7_432156.png "QQ截图20180807142558.png")



```
<select name="orgArea" xm-select="orgArea" lay-verify="required"  xm-select-radio="" xm-select-skin="normal">
    <option value="">请选择单位所在省市区</option>
</select>

<script>
layui.formSelects.data('orgArea', 'server', {
    url: '/city',
    linkage: true,
    linkageWidth: 130
});
</script>
```