LayUI使用formSelects-v4做复选下拉框

话不多说先上效果

formSelects-v4下载地址

这是formSelects插件的下载地址：https://fly.layui.com/extend/formSelects/#download

首先在页面引入一下formSelects

<link href="../../layuiadmin/jquery/formSelects-v4.css" target="_blank" rel="external nofollow"  rel="stylesheet" />
<script src="../../layuiadmin/jquery/formSelects-v4.js"></script>
           

在select标签上定义

<label class="layui-form-label">查看类型</label>
            <div class="layui-input-block" style="float:left;">
                <select xm-select="select1" xm-select-show-count="2" name="stype" id="stype" lay-verify="required" lay-filter="xmFilter1">
                </select>
            </div>
           

其中xm-select是formSelects辨识select标签的唯一标识，在这个属性上需要自定义一下

获取动态数据绑定到select上

$.ajax({
          url: "接口",
          dataType: 'json',
          data: "参数",
          type: 'get',
          success: function (res) {
                //拿出res中data数组
                var data= res.data;
                var keys = [];
                //通过循环遍历将数据赋值到temp这个二维数组中
                for (var i = 0; i < data.length; i++) {
                    var temp = {
                            "name" : data[i].value,
                            "value" : data[i].code//这里需要注意，value应该不同，否则在下拉框选择数据的时候，选择上的数据回事一样的
                    }
                    keys.push(temp)
                }
                //由于formSelect需要的arr是[{"name":"shuju1","value":"shuju2"},{....},{...}]这样的格式，所以上面这样去处理
                formSelects.data("select1", "local", {
                    arr : keys
                });
          }
           

参考博客（大家也可以看一下）

有关于formSelects插件的使用心得(入门)