layui下拉多选formSelects使用方法和（动态选中下拉框）

下载formSelects-v4插件（引入formSelects-v4.css和formSelects-v4.js）
下载地址：https://fly.layui.com/extend/formSelects/#download

<link rel="stylesheet" href="style/formSelects-v4.css"> //引入formSelects-v4样式
<div class="layui-form-item">
    <label class="layui-form-label">系统用户</label>
     <div class="layui-input-inline">
         <select id="sysusers" name="systemUserIds" xm-select-height="36px" xm-select="select2">
             <!-- <option value="">请选择</option>
                  <option value="0">北京</option>
                  <option value="1">上海</option>
                  <option value="2">重庆</option> -->
          </select>
      </div>
</div>

//注册插件
layui.config({
        base: './js/' //路径为插件
  }).extend({
        formSelects: 'formSelects-v4'
  });
//使用插件，在layui.use中添加formSelects
layui.use(['element', 'laydate', 'table', 'layer', 'form', 'laypage', 'upload', 'tree', 'formSelects'], function () {
        var element = layui.element
            laydate = layui.laydate,
            table = layui.table,
            layer = layui.layer,
            form = layui.form,
            upload = layui.upload,
            tree = layui.tree,
            laypage = layui.laypage,
            formSelects = layui.formSelects;
        form.render();
        formSelects.btns('select2', []);

    getSysname: function (typeKey) {
                var keys = []
                $.ajax({
                    url: url,
                    type: "post",
                    async: true,
                    data:{typeKey},
                    success: function (data) {
                        //console.log(data, '系统用户');
                        if(data.data){
                            for (var i = 0; i < data.data.length; i++) { //formSelects-v4只支持name和value两个属性，使用时必须为josn格式属性必须为name和value
                                var temp = {
                                    "name": data.data[i].systemUserId,
                                    "value": data.data[i].id  //value为唯一标识，此处为id
                                }
                                keys.push(temp)
                            }
                            console.log(keys)
                            formSelects.data('select2', 'local', { //请求数据后，将数据动态渲染到下拉框中
                                arr: keys
                            });
                            form.render();
                        }
                    },
                });
            },

formSelects.btns('select2', []); //去掉全选等工具条
formSelects.data('select2', 'local', {arr: []}); //清空下拉框数据
formSelects.value('select2',data.data.systemUsers,true); //给下拉框中追加数据，true：如果该值已选中则跳过, 该值未选中则选中；若为false：如果该值没有选中则跳过, 该值被选中则取消选中

二、动态选中下拉框

var formSelects = layui.formSelects;

//发送文章ID到后台查询文章所绑定的标签id存入到数组中
  var vArray = new Array();
        $.ajax({
            url: "/pgArticles/queryArticleById",
            type: "get",
            async: true,
            data: {
                articleId: $.getUrlParam("articleId")
            },
            success: function (data) {
                if (data.code = 200) {
         //遍历id存入到vArray 数组中
                    for (i = 0; i < data.data.pgArtitleLabelRefList.length; i++) {
                        console.log(data.data.pgArtitleLabelRefList[i].labelId);
                        vArray[i] = data.data.pgArtitleLabelRefList[i].labelId;
                    }
                }
            },
        });


//这个是查询数据添加到下拉多选框的方法  注意：（动态选中下拉框必须等渲染下拉框完成之后再选中）
   var keys = []
        $.ajax({
            url: "/pgArticles/queryLabelsList",
            type: "get",
            async: true,
            /*data:{typeKey},*/
            success: function (data) {
                console.log(data, '标签');
                if (data) {
                    for (var i = 0; i < data.length; i++) { //formSelects-v4只支持name和value两个属性，使用时必须为josn格式属性必须为name和value
                        var temp = {
                            "name": data[i].labelName,
                            "value": data[i].labelId  //value为唯一标识，此处为id
                        }
                        keys.push(temp)
                    }
                    /*console.log(keys)*/
                    formSelects.data('select2', 'local', { //请求数据后，将数据动态渲染到下拉框中
                        arr: keys
                    });
                  // 定义一个定时器0.2秒之后再执行
                    setTimeout(function(){
               //根据vArray 数组里的ID选中下拉多选框
     //formSelects.value('select1', [2, 4]);       // 选中value为2和4的option → 上海,深圳
                        formSelects.value('select2', vArray);
                    },200)
                    console.log(vArray,'数组')
                    formSelects.value('select2', vArray);
                    form.render();
                }
            },
        });