Layui下拉列表框动态赋值

jsp页面代码

//如果不适用form标签，需要加上.layui-form
<div class="demoTable layui-form">
    搜索：
    <div class="layui-inline">
        <input class="layui-input" name="id" id="demoReload" autocomplete="off">
    </div>
    <div class="layui-input-inline">
        <select name="roleList" id="sList" lay-verify="required" lay-filter="xmFilter">
            <%--<option value="">请选择</option>--%>
        </select>
    </div>

js代码

//下拉选择框动态赋值
$.ajax({
    url:"/smbms/selectList",//controller请求地址
    dataType:"json",
    type:"get",
    success:function (data) { //注意后端代码返回数据key值必须同名 为data
        console.log(data)
        //使用循环遍历，给下拉列表赋值
        $.each(data.data,function (index,value) {
            $("#sList").append(new Option(value.roleName,value.id))//对应映射字段名 第一个为显示的值  第二个为value值
        });
        layui.form.render("select")//重新渲染 固定写法
    }
})
});

后端代码

//后端代码
@RequestMapping("/selectList")
@ResponseBody
public Object selectList(){
    Map<String,Object> maps = new HashMap<>();
   List<Role> roleList = userService.getRoleName();//查询出数据
   maps.put("data",roleList);
   return maps;
}

Layui默认下拉列表框是嵌套在form表单中，可以将div标签加上layui-form类，就可以使用样式了，一定注意后端代码返回数据的key值，需要和js代码保持一致，整体还是比较清晰的，希望可以帮到各位咯~