解决使用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 相关文章推荐
使用ExtJS技术实现的拖动树结点
Aug 05 Javascript
正负小数点后两位浮点数实现原理及代码
Sep 06 Javascript
JavaScript函数获取事件源的小例子
May 14 Javascript
使用jQueryMobile实现滑动翻页效果的方法
Feb 04 Javascript
javascript中的Base64、UTF8编码与解码详解
Mar 18 Javascript
JavaScript中的Math.LN2属性用法详解
Jun 12 Javascript
vuejs开发组件分享之H5图片上传、压缩及拍照旋转的问题处理
Mar 06 Javascript
React-router4路由监听的实现
Aug 07 Javascript
React+Webpack快速上手指南(小结)
Aug 15 Javascript
使vue实现jQuery调用的两种方法
May 12 jQuery
JS实现网站吸顶条
Jan 08 Javascript
vue实现简易音乐播放器
Aug 14 Vue.js
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
用IE远程创建Mysql数据库的简易程序
2006/10/09 PHP
php基础知识:类与对象(2) 自动加载对象
2006/12/13 PHP
CI框架Session.php源码分析
2014/11/03 PHP
PHP信号量基本用法实例详解
2016/02/12 PHP
Yii框架的路由配置方法分析
2019/09/09 PHP
ajax无刷新动态调用股票信息(改良版)
2008/11/01 Javascript
JS中字符问题(二进制/十进制/十六进制及ASCII码之间的转换)
2008/11/03 Javascript
灵活应用js调试技巧解决样式问题的步骤分享
2012/03/15 Javascript
jQuery表单获取和失去焦点输入框提示效果的实例代码
2013/08/01 Javascript
javascript自动改变文字大小和颜色的效果的小例子
2013/08/02 Javascript
JS幻灯片可循环播放可平滑旋转带滚动导航(自写)
2013/08/05 Javascript
JS简单的图片放大缩小的两种方法
2013/11/11 Javascript
深入理解JavaScript系列(22):S.O.L.I.D五大原则之依赖倒置原则DIP详解
2015/03/05 Javascript
jquery无限级联下拉菜单简单实例演示
2015/11/23 Javascript
jquery if条件语句的写法
2016/05/19 Javascript
浅谈js中对象的使用
2016/08/11 Javascript
jQuery搜索框效果实现代码(百度关键词联想)
2021/02/25 Javascript
JavaScript模块详解
2017/12/18 Javascript
Vue入门之数据绑定(小结)
2018/01/08 Javascript
详解从Vue-router到html5的pushState
2018/07/21 Javascript
Node.js Buffer模块功能及常用方法实例分析
2019/01/05 Javascript
浅谈React中组件逻辑复用的那些事儿
2020/05/21 Javascript
[01:34]完美“圣”典宣传片震撼发布,12.17与你不见不散
2016/12/16 DOTA
[46:04]Liquid vs VP Supermajor决赛 BO 第四场 6.10
2018/07/05 DOTA
使用Python程序抓取新浪在国内的所有IP的教程
2015/05/04 Python
使用Python向DataFrame中指定位置添加一列或多列的方法
2019/01/29 Python
简单了解Python字典copy与赋值的区别
2020/09/16 Python
CSS3实现全景图特效示例代码
2018/03/26 HTML / CSS
关于HTML5你必须知道的28个新特性,新技巧以及新技术
2012/05/28 HTML / CSS
丝芙兰加拿大官方网站:SEPHORA加拿大
2018/11/20 全球购物
Linux如何命名文件--使用文件名时应注意
2014/05/29 面试题
实习生矿工检讨书
2014/10/13 职场文书
2014保险公司内勤工作总结
2014/12/16 职场文书
实习证明模板
2015/06/16 职场文书
《玩出了名堂》教学反思
2016/02/17 职场文书
创业计划书之校园超市
2019/09/12 职场文书