Layui下拉选择框渲染不上(渲染失败)
我这边是要做一个部门的下拉框选择,首先我从后台查询出所以的部门。再通过json传到前端用$.each()循环遍历,再通过prepend,append等方法赋值下拉框。
但一切都觉得没问题的时候,结果就是渲染不上。其实原因很简单就是我忘记加 form.render('select'); //刷新select选择框渲染,这个小小问题耽误了我半天的时间;怪自己不仔细看文档。
=====html代码
<div class="layui-inline"> <label class="layui-form-label">部门名称</label> <div class="layui-input-inline" > <select name="depName" id="selectDep"> </select> </div> </div>
====jq渲染代码
$(function () { $.get("${pageContext.request.contextPath}/emp/depName",{},function (data) { $("#selectDep").prepend("<option value='' class='layui-input'>未选择</option>"); $.each(JSON.parse(data),function (index,item) { $("#selectDep").append("<option value='"+item+"' >"+item+"</option>") }); //最终的赋值填空是依赖这句话 (也就是少了这句话) layui.form.render("select"); }); });
=====后台java代码
/** * 查询所有部门名称 * * @return */ @RequestMapping("/depName") @ResponseBody public List depName() { Map map = new HashMap(); //查询所有部门 List<DeptVo> deptVos = dept.selectAll(); //因为我们只需要部门名称就行,所以我们只存部门名称. List<String> dpeNames = new ArrayList(); //把部门名称遍历出来,存到dpeNames集合里面去 for (int i = 0; i < deptVos.size(); i++) { DeptVo deptVo = deptVos.get(i); dpeNames.add(deptVo.getDepName()); } return dpeNames;