动态生成多选框

后台

    /**
     * 获取所有角色
     * @return
     */
    @RequestMapping("getAllRole")
    @ResponseBody
    public List<SysRole> getAllRole(){
        List<SysRole> result = roleService.getAllRole();
        return result;
    }

前端JS

function loadRoleChk(url,tag_id){
    $.ajax({
                 url:url,    
                 dataType:'json',
                 data:{},
                 type:'post',
                 success:function(data){
                var options="";   //字符串拼接
                for(var i in data){  //遍历json数组
                    options += "<input type='checkbox' class='roles' name='roles' id='"+data[i].rolecode+"' value='"+data[i].rolecode+"'>"+data[i].rolename+"&nbsp;&nbsp;"
                }
                $('#'+tag_id).empty();
                $('#'+tag_id).html(options);
                 },
                 error:function(){}
           });
}

调用

$(function(){
     loadRoleChk("/${appName}/manager/roleController/getAllRole","roleAccess");
});

HTML

<div class="form-group">
    <label class="col-sm-3 control-label">
        所属角色：
    </label>
    <div class="col-sm-8 controls" id='roleAccess'>
    </div>
</div>

 

转载于:https://www.cnblogs.com/aeolian/p/9336437.html