layui渲染Select列表

最新推荐文章于 2024-07-14 23:42:27 发布

转载最新推荐文章于 2024-07-14 23:42:27 发布 · 804 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：https://www.cnblogs.com/Code-Handling/p/12123915.html

文章标签：

#javascript

JS 同时被 2 个专栏收录

7 篇文章

订阅专栏

Layui

6 篇文章

订阅专栏

本文介绍如何在layui框架中使用$.get方法从后端获取数据并动态填充到下拉框，展示了一个具体的实现案例，包括页面代码、控制层代码及渲染效果。

页面代码

<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();
    }

渲染效果

在这里插入图片描述