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

静态网页+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的下拉列表的数据回显方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。