解决使用layui对select append元素无效或者未及时更新的问题

一、问题

本人在使用layui使用了select按钮,点击是js脚本会异步请求后台接口获取json数据,然后layui将json数据渲染到select上,然而获取接口数据没有问题,就是无法更新。

本人使用代码如下:

<div class="main layui-clear">
  <div class="fly-panel" pad20>
    <h2 class="page-title">发布帖子</h2>

    <div class="layui-form layui-form-pane">
      <form method="post">
        <div class="layui-form-item">
          <label for="L_title" class="layui-form-label">标题</label>
          <div class="layui-input-block">
            <input type="text" id="L_title" name="title" required lay-verify="required" autocomplete="off"
                class="layui-input">
          </div>
        </div>
        <div class="layui-form-item layui-form-text">
          <div class="layui-input-block">
            <textarea id="L_content" name="content" placeholder="请输入内容" class="layui-textarea fly-editor"
                 style="height: 260px;"></textarea>
          </div>
          <label for="L_content" class="layui-form-label" style="top: -2px;">描述</label>
        </div>
        <div class="layui-form-item">
          <div class="layui-inline">
            <label class="layui-form-label">标签选择框</label>
            <div class="layui-input-block">
              <div class="layui-input-inline" onclick="">
                <script id="labels" type="text/html">
                  {{# layui.each(d.data, function(index,item){ }}
                    <option value="{{item.id}}">{{item.name}}</option>
                  {{# }); }}
                </script>
                <select name="modules" lay-search="" id="label_select" name="labelId">
                </select>
              </div>
            </div>
          </div>
        </div>
        <div class="layui-form-item">
          <button class="layui-btn" lay-filter="*" lay-submit>立即发布</button>
        </div>
      </form>
    </div>
  </div>
</div>

js 脚本如下(该代码是修改后的,添加了修改后的关键代码,下面有提示):

<script>
  layui.use(['form', 'laytpl', 'layedit'], function () {
    var form = layui.form,
      layedit = layui.layedit,
      layer = layui.layer,
      laytpl = layui.laytpl;
    //添加option
    $.get(quark_label_getall_api, function (data) {
      data = $.parseJSON(data);
      if (data.status == 200) {
        var tpl = $("#labels").html();
        laytpl(tpl).render(data, function (html) {
          $("#label_select").append(html);
          var form = layui.form
          form.render();
        });
      } else {
        layer.msg(data.error, {icon: 5});
      }
    });
    layedit.set({
      uploadImage: {
        url: quark_upload_api,
        type: 'post' //默认post
      }
    });
    var content = layedit.build('L_content'); //建立编辑器
    form.on('submit(*)', function (data) {
      var layeditval = layedit.getContent(content);
      if (layeditval == "" || layeditval == undefined || layeditval == null) {
        layer.msg("输入的内容不能为空", {icon: 7});
        return false;
      }
      $.post(quark_posts_add_api, {
          title: data.field.title,
          content: layedit.getContent(content),
          labelId: data.field.labelId,
          token: getCookie()
        },
        function (data) {
          //data=$.parseJSON(data);
          if (data.status == 200) {
            layer.msg("发布成功", {
              icon: 1,
              time: 1000 //1秒关闭
            }, function () {
              location.href = "/pages/index";
            });
          } else if (data.status == 400) {
            layer.msg(data.error, {icon: 7});
          } else {
            layer.msg(data.error, {icon: 5});
          }
        }, "json");
      return false;
    });
  });
  //封装查询参数
  function getData(data) {
    var param = {};
    param.title = data.title;
    param.labelId = data.labelId;
    param.token = getCookie();
    return param;
  }
</script>

二、解决办法:

Layui会对select、checkbox、radio等原始元素隐藏,从而进行美化修饰处理。但这需要依赖于form组件,所以必须加载 form,并且执行一个实例。导航的Hover效果、Tab选项卡等同理(它们需依赖 element 模块)

所以当新添加这些元素时需要对页面表单元素重新渲染一下,需要模仿下面添加关键代码

layui.use('form', function(){
 var form = layui.form; //只有执行了这一步,部分表单元素才会自动修饰成功

 //……

 //但是,如果你的HTML是动态生成的,自动渲染就会失效
 //因此你需要在相应的地方,执行下述方法来手动渲染,跟这类似的还有 element.init();
 form.render();
});

最后js异步获取的数据可以在select上及时显示了

效果图:

以上这篇解决使用layui对select append元素无效或者未及时更新的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。

(0)

相关推荐

  • 在layui中select更改后生效的方法

    在layui中重新渲染表单这一步比较重要,部分表单元素需要重新渲染后才能生效,例如select 建议在js中放入以下function: //重新渲染表单 function renderForm(){ layui.use('form', function(){ var form = layui.form; //只有执行了这一步,部分表单元素才会自动修饰成功 form.render(); }); } 在每次操作部分表单元素后都进行一次调用 以上这篇在layui中select更改后生效的方法就是小编分

  • 解决layui 三级联动下拉框更新时回显的问题

    最近接触layui,比较简洁美观的一款ui,但也有很多小坑,记录一下实现省市区下拉三级联动更新回显的问题 <%--监听省份选择 --%> form.on('select(uprovinceId)', function(data){ initCityList('change'); }); 这里面有个问题就是 选择的时候 如果 请选择 的value 是"" 空字符串,当选择从河北省变到请选择时不会触发这个监听事件 <script type="text/javaS

  • layui 点击重置按钮, select 并没有被重置的解决方法

    如下所示: 点击重置时,输入框被重置为空,而账号 select元素并没有被重置. // 重置事件 $("#reset").click(function () { $("#searchContent").val(""); $("#selectKey").val(""); form.render(); }) 调用一下 form.render();即可 为什么表单不显示? 当你使用表单时,Layui会对selec

  • layui select动态添加option的实例

    html <form class="layui-form" action=""> <div class="layui-form-item proSelect"> <label class="layui-form-label">产品类别</label> <div class="layui-input-block editWidth"> <sel

  • 解决使用layui对select append元素无效或者未及时更新的问题

    一.问题 本人在使用layui使用了select按钮,点击是js脚本会异步请求后台接口获取json数据,然后layui将json数据渲染到select上,然而获取接口数据没有问题,就是无法更新. 本人使用代码如下: <div class="main layui-clear"> <div class="fly-panel" pad20> <h2 class="page-title">发布帖子</h2>

  • 解决使用layui的时候form表单中的select等不能渲染的问题

    1.使用的是动态的添加一些内容到表单里面去,然后就出现了原始的html标签样式,看了问题的解决也有,尝试了一下,以为是将form.render放到html页面里的script里就可以了,但是通过实验发现,不能放在页面里的script标签里面,应该放在你动态添加的元素的方法的后面,也就是添加的代码写完,放在这之后. 主要问题中说的要将select等标签放在 class="layui-form" 的标签元素下 $("#father").append("<

  • layui之select的option叠加问题的解决方法

    小编我在使用layui,在select的地方遇到了坑,select里的值居然无法清空,select里的option还有叠加问题,为了解决这个问题,也达到我的功能,我研究了下,让有同样需求的小伙伴不踩坑,特贴上我的源码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>layui-下拉框联动测试</title&g

  • layui layer select 选择被遮挡的解决方法

    在编程的时候, layer弹窗中的select 经常会遇到被遮挡的情况: 解决方法:在页面里面找到对应div的class 给overflow新的属性visible即可(默认值.内容不会被修剪,会呈现在元素框之外.)即可显示出下拉框 1.找到层1 的overflow 属性, 修改成为visible. 2. 如果有层2, 就把层2的也设置一下, 就完美解决了!!! 示例: 下面是一些示例: $(".layui-table-body").css('overflow','visible');

  • layui 中select下拉change事件失效的解决方法

    layui 中select下拉change事件失效的处理方法 1.select中添加 lay-filter="test" <select lay-filter="test"></select> 2.处方方法 form.on('select(test)', function(data){ console.log(data.elem); //得到select原始DOM对象 console.log(data.value); //得到被选中的值 co

  • 解决layui动态添加的元素click等事件触发不了的问题

    在页面加载完成时候 '.add_project' 元素是可以触发click时间的,当动态添加 '.add_project' 时候,新添加的元素却触发不了click事件,类似下面的写法: $(".add_project").on('click', function(){ alert('1') }); 解决办法很简单,就是用全局的document来监控 '.add_project' 元素,如下: $(document).on("click",".add_pro

  • layui中select,radio设置不生效的解决方法

    废话不多说,大家来看吧! <button class="layui-btn layui-btn-radius" layadmin-event="edit"> <i class="layui-icon"></i>编辑</button> 点击编辑取消disabled $(function(){ $("input").attr("disabled",true);

  • layui下拉列表select实现可输入查找的方法

    如下图,这是一个layui的下拉列表select,随着下拉数据越来越多,我们找某个选项就比较吃力了. 这是原下拉列表的代码(数据是从后台传来的): 为了解决这个问题,我们可以将select改为可以筛选的格式,如下图. 具体如何操作?其实很简单,在原select元素中加入 lay-search 即可. 以上这篇layui下拉列表select实现可输入查找的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • 解决jquery中动态新增的元素节点无法触发事件问题的两种方法

    比如做一个ajax读取留言列表的时候,每条留言后面有个回复按钮,class为"reply",如果你用的是$(".reply").click(function(){ //do something... }),想必后面通过ajax加载进来的列表中的回复按钮,点击事件会失效. 其实最简单的方法就是直接在标签中写onclick="",但是这样写其实是有点low的,最好的方式还是通过给类名绑定一个click事件. 解决jquery中动态新增的元素节点无法触

  • Layui 设置select下拉框自动选中某项的方法

    1. 需求场景分析 用户需要更改某一项活动的信息,活动信息中包含需要用下拉框选择的字段A.在用户点击进行修改弹出对话框的瞬间需要填补已有的活动信息,自动选择字段A已经存在的值. 2. Layui的select下拉框是怎么实现的 为了获得一个select标配的下拉框,我们需要在html中填写的内容如下: <div class="layui-form-item"> <label class="layui-form-label"><span

随机推荐