Layui下拉框多选，动态加载选项并默认选中（IDEA简单详细）

1.导入必要的文件

<script src="../../lib/layui-v2.5.5/layui.js" th:src="@{/lib/layui-v2.5.5/layui.js}" charset="utf-8"></script>
 <link rel="stylesheet" href="../../lib/layui-v2.5.5/css/layui.css" th:href="@{/lib/layui-v2.5.5/css/layui.css}" media="all">

 <link rel="stylesheet" href="" th:href="@{/lib/formSelects/formSelects-v4.css}">
 <script src="" th:src="@{/lib/formSelects/formSelects-v4.js}" charset="utf-8"></script>

下拉框模块

 <div class="layui-form-item">
        <label class="layui-form-label">安排科目</label>
        <div class="layui-input-block">
            <select name="roleId" xm-select="roleId" lay-verify="required">

            </select>
        </div>
    </div>

2.获取数据并加载

 $.ajax({
                type: 'post',
                url: '[[@{/}]]system/selCsData',
                data: parent_json,
                success: function (data) {
                    console.log(data)
                    var courses=data.courses;
                    var cs=data.cs;
                    // 渲染多选下拉框
                    var roleSelectData = new Array();
                    for (var i = 0; i < courses.length; i++) {
                        //固定样式
                        roleSelectData.push({name: courses[i].sName, value: courses[i].sId});
                    }
                    //本地加载模式local
                    layui.formSelects.data('roleId', 'local', {arr: roleSelectData});



                    //获取对象列表的某个属性生成数组
                    var result = cs.map(function(item) {
                        return item.sId;
                    });
                    // 选中value为result中的option
                    layui.formSelects.value('roleId', result);       

                }
            });

3.效果