layui渲染Select列表

页面代码

<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");

控制层

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

渲染结果

本人实践

<div class="layui-form-item" style="margin-bottom: 20px">
        <label class="layui-form-label">所属试卷</label>
            <div class="layui-input-inline">
                <select name="category" id="categorys" lay-verify="required">
                    <option value="">请选择</option>
                </select>
            </div>
    </div>

<script>
    layui.use('form', function(){
        var form = layui.form;
        $.get("/addOption",{},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].testId);
                    option.innerText = list[c].testName;
                    select.appendChild(option)
                }
            };
            form.render('select');
        },"json");
        //各种基于事件的操作，下面会有进一步介绍
    });
</script>

postman数据返回参考

控制层

 @ResponseBody
    @GetMapping("/addOption")
    public List<Test> addOPtion(){
        return backstageService.findOption();
    }

渲染效果