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


Posted in Javascript onSeptember 18, 2019

一、问题

本人在使用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元素无效或者未及时更新的问题

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

Javascript 相关文章推荐
jQuery 添加/移除CSS类实现代码
Feb 11 Javascript
dojo学习第二天 ajax异步请求之绑定列表
Aug 29 Javascript
js中小数转换整数的方法
Jan 26 Javascript
js 获取、清空input type=&quot;file&quot;的值示例代码
Feb 19 Javascript
如何正确使用javascript 来进行我们的程序开发
Jun 23 Javascript
JS简单实现点击复制链接的方法
Aug 03 Javascript
node.js平台下利用cookie实现记住密码登陆(Express+Ejs+Mysql)
Apr 26 Javascript
Node学习记录之cluster模块
May 31 Javascript
微信JSAPI Ticket接口签名详解
Jun 28 Javascript
安装多版本Vue-CLI的实现方法
Mar 24 Javascript
微信小程序以ssm做后台开发的实现示例
Apr 08 Javascript
使用 Github Actions 自动部署 Angular 应用到 Github Pages的方法
Jul 20 Javascript
Flutter实现仿微信底部菜单栏功能
Sep 18 #Javascript
详解element-ui中表单验证的三种方式
Sep 18 #Javascript
layui的布局和表格的渲染以及动态生成表格的方法
Sep 18 #Javascript
vue中使用element组件时事件想要传递其他参数的问题
Sep 18 #Javascript
解决layui追加或者动态修改的表单元素“没效果”的问题
Sep 18 #Javascript
解决使用layui的时候form表单中的select等不能渲染的问题
Sep 18 #Javascript
解决layer 动态加载select 失效的问题
Sep 18 #Javascript
You might like
PHP表单数据写入MySQL数据库的代码
2016/05/31 PHP
JavaScript中的new的使用方法与注意事项
2007/05/16 Javascript
JS 分号引起的一段调试问题
2009/06/18 Javascript
理解Javascript_15_作用域分配与变量访问规则,再送个闭包
2010/10/20 Javascript
提取字符串中年月日的函数代码
2013/11/05 Javascript
jquery实现鼠标拖动图片效果示例代码
2014/01/09 Javascript
js冒泡、捕获事件及阻止冒泡方法详细总结
2014/05/08 Javascript
当前流行的JavaScript代码风格指南
2014/09/10 Javascript
JavaScript获取Url里的参数
2014/12/18 Javascript
js与jquery正则验证电子邮箱、手机号、邮政编码的方法
2016/07/04 Javascript
vue给组件传递不同的值方法
2018/09/29 Javascript
微信小程序实现同一页面取值的方法分析
2019/04/30 Javascript
使用vue实现各类弹出框组件
2019/07/03 Javascript
Layui 解决表格异步调用后台分页的问题
2019/10/26 Javascript
[02:52]2017DOTA2国际邀请赛中国区预选赛晋级之路
2017/07/03 DOTA
Python中的jquery PyQuery库使用小结
2014/05/13 Python
Python类的用法实例浅析
2015/05/27 Python
使用Python读写及压缩和解压缩文件的示例
2016/07/08 Python
Python三级目录展示的实现方法
2016/09/28 Python
Python AutoCAD 系统设置的实现方法
2020/04/01 Python
Python 利用Entrez库筛选下载PubMed文献摘要的示例
2020/11/24 Python
如何利用Python matplotlib绘制雷达图
2020/12/21 Python
美国受信赖的教育产品供应商:Nest Learning
2018/06/14 全球购物
GOLFINO英国官网:高尔夫服装
2020/04/11 全球购物
经典优秀个人求职信分享
2013/12/12 职场文书
保密承诺书范文
2014/03/27 职场文书
高三毕业寄语
2014/04/10 职场文书
纪检干部先进事迹材料
2014/08/23 职场文书
工伤私了协议书范本
2014/11/24 职场文书
三好学生个人总结
2015/02/15 职场文书
2015年党员岗位承诺书
2015/04/27 职场文书
房屋买卖定金协议书
2016/03/21 职场文书
IDEA 链接Mysql数据库并执行查询操作的完整代码
2021/05/20 MySQL
Nginx进程调度问题详解
2021/09/25 Servers
Vue自定义铃声提示音组件的实现
2022/01/22 Vue.js
对讲机的最大通讯距离是多少
2022/02/18 无线电