解决使用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 相关文章推荐
关于实现代码语法标亮 dp.SyntaxHighlighter
Feb 02 Javascript
使用EXT实现无刷新动态调用股票信息
Nov 01 Javascript
JavaScript 监听textarea中按键事件
Oct 08 Javascript
jquery foreach使用示例
Sep 12 Javascript
javascript动态创建链接的方法
May 13 Javascript
javascript下拉列表中显示树形菜单的实现方法
Nov 17 Javascript
Javascript获取数组中的最大值和最小值的方法汇总
Jan 01 Javascript
提高JavaScript执行效率的23个实用技巧
Mar 01 Javascript
Vue学习笔记进阶篇之单元素过度
Jul 19 Javascript
详解@angular/cli 改变默认启动端口两种方式
Nov 29 Javascript
Vue 使用typescript如何优雅的调用swagger API
Sep 01 Javascript
JavaScript中跨域问题的深入理解
Mar 04 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
zen cart新进商品的随机排序修改方法
2010/09/10 PHP
PHP中curl_setopt函数用法实例分析
2015/04/16 PHP
THINKPHP在添加数据的时候获取主键id的值方法
2017/04/03 PHP
php下的原生ajax请求用法实例分析
2020/02/28 PHP
php5.3/5.4/5.5/5.6/7常见新增特性汇总整理
2020/02/27 PHP
通过JavaScript控制字体大小的代码
2011/10/04 Javascript
jquery表单验证使用插件formValidator
2012/11/10 Javascript
纯JavaScript实现获取onclick、onchange等事件的值
2014/12/29 Javascript
浅谈JavaScript数据类型及转换
2015/02/28 Javascript
javascript操作表格排序实例分析
2015/05/06 Javascript
css如何让浮动元素水平居中
2015/08/07 Javascript
分享12个非常实用的JavaScript小技巧
2016/05/11 Javascript
jQuery验证表单格式的使用方法
2017/01/10 Javascript
javascript笔记之匿名函数和闭包
2017/02/06 Javascript
js代码延迟一定时间后执行一个函数的实例
2017/02/15 Javascript
js 取消页面可以选中文字的功能方法
2018/01/02 Javascript
vue组件暴露和.js文件暴露接口操作
2020/08/11 Javascript
用Python写一个无界面的2048小游戏
2016/05/24 Python
简单了解Python中的几种函数
2017/11/03 Python
Python实现的人工神经网络算法示例【基于反向传播算法】
2017/11/11 Python
十分钟搞定pandas(入门教程)
2019/06/21 Python
python GUI库图形界面开发之PyQt5 MDI(多文档窗口)QMidArea详细使用方法与实例
2020/03/05 Python
python 在sql语句中使用%s,%d,%f说明
2020/06/06 Python
TensorFlow Autodiff自动微分详解
2020/07/06 Python
浅谈matplotlib 绘制梯度下降求解过程
2020/07/12 Python
PyTorch如何搭建一个简单的网络
2020/08/24 Python
Trunki英国官网:儿童坐骑式行李箱
2017/05/30 全球购物
美国隐形眼镜销售网站:ContactsDirect
2017/10/28 全球购物
美国演唱会和体育门票购买网站:Ticketnetwork
2018/10/19 全球购物
RetroStage德国:复古服装
2019/02/03 全球购物
先进德育工作者事迹材料
2014/01/24 职场文书
食品安全工作实施方案
2014/03/26 职场文书
学校感恩节活动策划方案
2014/10/06 职场文书
追悼词范文大全
2015/06/23 职场文书
销售人员管理制度
2015/08/06 职场文书
安全生产学习心得体会
2016/01/18 职场文书