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;
   

  

原文地址:https://www.cnblogs.com/268lwc/p/12127853.html

时间: 2024-09-28 21:51:44

Layui下拉选择框渲染不上(渲染失败)的相关文章

[jQueryUI] - Chosen:select下拉选择框美化插件及问题【转】

hosen 是一个支持jquery的select下拉框美化插件,它能让丑陋的.很长的select选择框变的更好看.更方便.不仅如此,它更扩展了select,增加了自动筛选的功能.它可对列表进行分组,同时也可禁用某些选择项. 先来看下插件的效果:   跟这个比起来,原来的select样式是不是弱爆了! 马上来武装我们的select吧: 1.先把js和css文件引用到网页里面去: ? 1 2 3 <link href="js/jqueryUI/chosen/chosen.css" t

jQuery插件——下拉选择框

其实,之前也写过jQuery插件,今天写的是一个模拟select选择的下拉插件. 既然是jQuery插件,那么必然是依赖jQuery的了. 老规矩,直接上代码吧! ;(function () { $.fn.extend({ dropdown:function (options) { return this.each(function (i, val) { $(val).css("position", "relative"); // 设置默认参数 var opts =

jquery.chosen.js下拉选择框美化插件项目实例

由于之前使用的bootstrap-select插件是建立在bootstrap基础上的,实际使用到项目中的时候,与我们使用的ace-admin(基于bootstrap)存在样式冲突,导致下拉框的样式发生变化.为了界面的美观,不得已查资料寻找另外的插件. 使用jquery.chosen.js下拉选择框美化插件同样也能达到类似效果 完成效果如下 实现步骤如下 1.导入相关文件 <link rel="stylesheet" href="${ctxStatic}/css/chos

CSS3+Jquery实现带动画效果的下拉选择框

CSS3+JQuery实现带动画效果的下拉选择框. 元素结构为: 1 <div class="box"> 2 <p>this is the first li</p> 3 <div id="blank"></div> 4 <ul> 5 <li class="selected">this is the first li</li> 6 <li >

下拉选择框select的纯CSS替代方案

这篇教程中,我将给大家展示表单元素下拉选择框select的CSS替代方案.该方法采用css来实现,看上去非常简单.我们用radio标签列表来模拟下拉列表,选择一个radio可以很好的模拟出select中选择一个元素的效果. 一:HTML 下面是我们在form表单里面用到的html代码: .代码 <fieldset class="radio-container"> <div class="radio-options"> <div clas

【石墨】极客编程小挑战#26:实现日期级联下拉选择框

详细内容请参见原文:http://www.gbtags.com/gb/share/5823.htm 本期挑战: 初始的html代码如下: <select name="year" id="year"> <option value="0">--</option> <option value="1999">1999</option> <option value=&qu

解决v-for中遍历多个el-select时,下拉选择框同步选择问题

当v-for遍历多个el-select时,由于v-model绑定的值为同一个,导致下拉选择时多个下拉选择框同步选择问题 如图是v-model绑定的同一个seatValue数据: 解决办法: 一.为el-select绑定不同的v-mode值,将v-for传递的index值绑定在v-model的参数上( v-model="seatValue[index]" ) 二.通过axios获取数据时,创建一个新的seatValue空数组,通过map遍历获取到的fourthContentArr里的每一

Bootstrap系列 -- 15. 下拉选择框select

Bootstrap框架中的下拉选择框使用和原始的一致,多行选择设置multiple属性的值为multiple.Bootstrap框架会为这些元素提供统一的样式风格 <form role="form"> <div class="form-group"> <select class="form-control"> <option>1</option> <option>2</

下拉选择框改变表单action的简单例子

做了个简单的小例子 用js弄的. form  的代码 1 <form  action=""  method="post" id="formRole"> type的 下拉单 1 2 3 4 5 6 <select name="type" id="type"  onchange="changeAction()">       <option value=&quo