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

蔚落 2021-08-13 19:07 575阅读 0赞

# 1.导入必要的文件 #

**下拉框模块**

# 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.效果 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQwODY0OA_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQwODY0OA_size_16_color_FFFFFF_t_70]: /images/20210813/6648f285ab934904a7bce49f2e5825d2.png