基于layui的下拉列表的数据回显方法


Posted in Javascript onSeptember 24, 2019

静态网页+layui渲染

html代码

<div class="layui-form-item">
  <label class="layui-form-label">选择框</label>
  <div class="layui-input-block">
   <select id="t" name="quiz2">
    <option value="">请选择市</option>
    <option value="2">杭州2</option>
    <option value="3">杭州3</option>
    <option value="4">杭州4</option>
    <option value="5">杭州5</option>
   </select>
  </div>
 </div>

js代码

<script>
  // 遍历select
  $("#t").each(function() {
    // this代表的是<option></option>,对option再进行遍历
    $(this).children("option").each(function() {
      // 判断需要对那个选项进行回显
      if (this.value == 2) {
        console.log($(this).text());
        // 进行回显
        $(this).attr("selected","selected");
      }
    });
  })
</script>

动态网页+layui渲染(级联下拉列表)

后台将第一个下拉列表的数据传到前台

public String getApiInfoByTypePage(@PathVariable String type, Model model, HttpServletRequest request) {
    List<DopApiType> typeList1 = apiService.findApiTypeByPid(1);
    log.error(typeList1);
    model.addAttribute("typeList1", typeList1);
}

前台页面用的是Thymeleaf的遍历将数据加载出来,然后layui自动渲染

<div class="layui-input-inline">
      <select id="quiz1" name="quiz1" lay-filter="quiz1">
        <option value="1">请选择一级服务目录</option>
        <option th:each="list1:${typeList1}" th:value="${list1.typeId}" th:text="${list1.typeName }"></option>
      </select>
    </div>
    <div class="layui-input-inline" lay-filter="inline1">
      <select id="quiz2" name="quiz2" lay-filter="quiz2">
        <option value="0">请选择二级服务目录</option>
      </select>
    </div>

一级下拉列表的监听事件

//监听一级服务目录下拉列表的选择时间
    form.on('select(quiz1)', function (data) {
      
      var pId = data.value;// 一级列表的id
      $.post('/getApiTypeByPid', {'pId': pId, '': 2}, function (msg) {// 请求二级列表的数据
        // console.log(msg);
        $('#quiz2').empty();// 将二级列表的内容清空
        for (var i in msg) {// 遍历数据赋值给二级列表的内容
          var $content = $('<option value="' + msg[i].typeId + '">' + msg[i].typeName + '</option>');
          $('#quiz2').append($content);
        }
        form.render('select');// 注意:数据赋值完成之后必须调用该方法,进行layui的渲染,否则数据出不来
      });
    });

数据回显的核心逻辑(java的根据目录格式,自行编写)

js部分

// 服务目录的数据回显
    var sesType = [[${type}]];
    var sesType1 = [[${type1}]];// 一级目录id
    var sesStatus = [[${status}]];
    // 一级目录回显
    $("#quiz1").each(function () {// 遍历select
      $(this).children("option").each(function () {// 遍历option
        if (this.value == sesType1) {// 跟后台传过来的id相同就显示selected
          // console.log("一级目录"+$(this).text());
          $(this).attr("selected", "selected");
          $.post('/getApiTypeByPid', {'pId': sesType1, '': 2}, function (msg) {// 根据一级目录的id获取二级目录的信息
            // console.log(msg);
            $('#quiz2').empty();// 清空
            for (var i in msg) { // 遍历,进行赋值
              if (msg[i].typeId == sesType) {// 判断要回显的二级目录
                var $content1 = $('<option value="' + msg[i].typeId + '" selected="selected">' + msg[i].typeName + '</option>');
                $('#quiz2').append($content1);
              } else {
                var $content = $('<option value="' + msg[i].typeId + '">' + msg[i].typeName + '</option>');
                $('#quiz2').append($content);
              }
 
            }
            form.render('select');// 注意:一定要调用该方法进行中心渲染,否则数据是显示不出来的
          });
        }
      });
    });

以上这篇基于layui的下拉列表的数据回显方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
求解开jscript.encode代码的asp函数
Feb 28 Javascript
javascript 弹出层组件(升级版)
May 12 Javascript
JavaScript的Module模式编程深入分析
Aug 13 Javascript
jquery实现无刷新验证码的简单实例
May 19 Javascript
JS中用childNodes获取子元素换行会产生一个子元素
Dec 08 Javascript
微信小程序movable view移动图片和双指缩放实例代码
Aug 08 Javascript
关于jQuery里prev()的简单操作代码
Oct 27 jQuery
浅谈webpack-dev-server的配置和使用
May 17 Javascript
vue中组件的过渡动画及实现代码
Nov 21 Javascript
微信小程序提取公用函数到util.js及使用方法示例
Jan 10 Javascript
jquery检测上传文件大小示例
Apr 26 jQuery
解决antd 表单设置默认值initialValue后验证失效的问题
Nov 02 Javascript
Layui动态生成select下拉选择框不显示的解决方法
Sep 24 #Javascript
layui动态渲染生成select的option值方法
Sep 23 #Javascript
微信小程序全局变量GLOBALDATA的定义和调用过程解析
Sep 23 #Javascript
layui-select动态选中值的例子
Sep 23 #Javascript
layui多图上传实现删除功能的例子
Sep 23 #Javascript
layui 上传插件 带预览 非自动上传功能的实例(非常实用)
Sep 23 #Javascript
详解从vue-loader源码分析CSS Scoped的实现
Sep 23 #Javascript
You might like
星际争霸任务指南——虫族
2020/03/04 星际争霸
php项目中百度 UEditor 简单安装调试和调用
2015/07/15 PHP
自动完成JS类(纯JS, Ajax模式)
2009/03/12 Javascript
jquery text,radio,checkbox,select操作实现代码
2009/07/09 Javascript
jQuery的deferred对象使用详解
2011/08/20 Javascript
S2SH整合JQuery+Ajax实现登录验证功能实现代码
2013/01/30 Javascript
使用jquery实现以post打开新窗口
2014/03/19 Javascript
JavaScript前端图片加载管理器imagepool使用详解
2014/12/29 Javascript
js超时调用setTimeout和间歇调用setInterval实例分析
2015/01/28 Javascript
js实现文本框中输入文字页面中div层同步获取文本框内容的方法
2015/03/03 Javascript
深入探讨javascript中的数据类型
2015/03/04 Javascript
JS实现网页顶部向下滑出的全国城市切换导航效果
2015/08/22 Javascript
AngularJs 动态加载模块和依赖
2016/09/15 Javascript
vue.js表格分页示例
2016/10/18 Javascript
简单理解vue中Props属性
2016/10/27 Javascript
jQuery 遍历map()方法详解
2016/11/04 Javascript
自定义require函数让浏览器按需加载Js文件
2016/11/24 Javascript
vue mint-ui tabbar变组件使用
2018/05/04 Javascript
Vue实现textarea固定输入行数与添加下划线样式的思路详解
2018/06/28 Javascript
Vue配置marked链接添加target=&quot;_blank&quot;的方法
2019/07/19 Javascript
vue 取出v-for循环中的index值实例
2019/11/09 Javascript
Nodejs + Websocket 指定发送及群聊的实现
2020/01/09 NodeJs
python3.X 抓取火车票信息【修正版】
2018/06/19 Python
Python logging设置和logger解析
2019/08/28 Python
python单向循环链表原理与实现方法示例
2019/12/03 Python
django教程如何自学
2020/07/31 Python
pycharm远程连接服务器并配置python interpreter的方法
2020/12/23 Python
adidas菲律宾官网:adidas PH
2020/02/07 全球购物
文员个人的求职信范文
2013/09/26 职场文书
财务主管自我鉴定
2014/01/17 职场文书
财务负责人任命书
2014/06/06 职场文书
国际商贸专业自荐信
2014/06/09 职场文书
2014年学校领导班子对照检查材料
2014/09/19 职场文书
中学生运动会新闻稿
2014/09/24 职场文书
2015年六年级班主任工作总结
2015/10/15 职场文书
2007年老电脑安装win11会怎么样? 网友实测win11在老电脑运行良好
2021/11/21 数码科技