layui渲染Select列表

Posted 2020-11-24 code-handling

1.引入

<link rel="stylesheet" href="../layui/css/layui.css">
<script src="../layui/layui.js"></script>

2.页面代码

<div class="layui-inline" style="width: 22%;">
      <label class="layui-form-label">文章分类</label>
          <div class="layui-input-inline" style="width: 66%;">
               <select name="category" id="categorys" lay-verify="required">
                     <option value="">请选择</option>
          </select>
      </div>
</div>

$.get("/category/findAll.do",{},function (data) {
            var list = data;
            var select = document.getElementById(‘categorys‘);
            if (list != null || list.size() > 0) {
               for (var c in list) {
                   var option = document.createElement("option");
                   option.setAttribute("value", list[c].id);
                   option.innerText = list[c].name;
                   select.appendChild(option)
               }
            };
            form.render(‘select‘);
        },"json");

3.控制层

@RestController
@RequestMapping("/category")
public class CategoryController{  
 @RequestMapping("/findAll.do")
    public List<SysCategory> findAll(){
        List<SysCategory> categoryList = categoryService.findAll();
        return categoryList;
    }
}

4. 返回的数据

controller层返回的数据

[SysCategory(id=1, name=JavaSe), SysCategory(id=2, name=JavaEE), SysCategory(id=3, name=前端), SysCategory(id=4, name=其他)]

页面接收到的数据

[{"id":1,"name":"JavaSe"},{"id":2,"name":"JavaEE"},{"id":3,"name":"前端"},{"id":4,"name":"其他"}]

5.渲染结果