基于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 相关文章推荐
jQuery动画animate方法使用介绍
May 06 Javascript
Js判断参数(String,Array,Object)是否为undefined或者值为空
Nov 04 Javascript
js控制不同的时间段显示不同的css样式的实例代码
Nov 04 Javascript
javascript三元运算符用法实例
Apr 16 Javascript
AngularJs ng-repeat 嵌套如何获取外层$index
Sep 21 Javascript
RGB和YUV 多媒体编程基础详细介绍
Nov 04 Javascript
flexslider.js实现移动端轮播
Feb 05 Javascript
canvas实现十二星座星空图
Feb 14 Javascript
uploader秒传图片到服务器完整代码
Apr 22 Javascript
vue滚动固定顶部及修改样式的实例代码
May 30 Javascript
Vue使用自定义指令实现拖拽行为实例分析
Jun 06 Javascript
原生jQuery实现只显示年份下拉框
Dec 24 jQuery
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
PHP编写daemon process 实例详解
2016/11/13 PHP
php设计模式之代理模式分析【星际争霸游戏案例】
2020/03/23 PHP
PHP 超级全局变量相关总结
2020/06/30 PHP
JS实现简单的图书馆享元模式实例
2015/06/30 Javascript
JS实现的仿淘宝交易倒计时效果
2015/11/27 Javascript
jquery实现图片上传前本地预览功能
2016/05/10 Javascript
原生js实现旋转木马轮播图效果
2017/02/27 Javascript
通过button将form表单的数据提交到action层的实例
2017/09/08 Javascript
Node.js中环境变量process.env的一些事详解
2017/10/26 Javascript
Node.js readline 逐行读取、写入文件内容的示例
2018/03/01 Javascript
JS 中可以提升幸福度的小技巧(可以识别更多另类写法)
2018/07/28 Javascript
如何在微信小程序里面退出小程序的方法
2019/04/28 Javascript
package.json各个属性说明详解
2020/03/11 Javascript
Vue实现移动端拖拽交换位置
2020/07/29 Javascript
JavaScript实现五子棋小游戏
2020/10/26 Javascript
使用typescript快速开发一个cli的实现示例
2020/12/09 Javascript
[02:10]DOTA2亚洲邀请赛 EG战队出场宣传片
2015/02/07 DOTA
Python实现变量数值交换及判断数组是否含有某个元素的方法
2017/09/18 Python
Python用于学习重要算法的模块pygorithm实例浅析
2018/08/16 Python
Python模拟百度自动输入搜索功能的实例
2019/02/14 Python
Django异步任务之Celery的基本使用
2019/03/23 Python
简单了解python关系(比较)运算符
2019/07/08 Python
Python Pandas数据中对时间的操作
2019/07/30 Python
python同时替换多个字符串方法示例
2019/09/17 Python
python 异步async库的使用说明
2020/05/04 Python
python字符串的index和find的区别详解
2020/06/20 Python
python uuid生成唯一id或str的最简单案例
2021/01/13 Python
canvas实现飞机打怪兽射击小游戏的示例代码
2018/07/09 HTML / CSS
商场端午节活动方案
2014/01/29 职场文书
民生工程实施方案
2014/03/22 职场文书
优秀教师个人材料
2014/12/15 职场文书
2014城乡环境综合治理工作总结
2014/12/19 职场文书
2015年师德师风自我评价范文
2015/03/05 职场文书
2016高考寄语集锦
2015/12/04 职场文书
2016年三严三实党课学习心得体会
2016/01/06 职场文书
详细聊一聊mysql的树形结构存储以及查询
2022/04/05 MySQL