解决使用layui对select append元素无效或者未及时更新的问题
作者:渣渣海 发布时间:2024-04-16 09:27:43
标签: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上及时显示了
效果图:
来源:https://blog.csdn.net/qq_34147021/article/details/87473340
0
投稿
猜你喜欢
- 本文是利用python 复制文件夹 刚开始写了一个普通的递归复制文件夹 然后想了想 觉得对io频繁的程序 thre
- php中可以使用 mb_detect_encoding() 函数来判断字符串是什么编码的。当在php中使用mb_detect_encodin
- 本文实例讲述了python版本的读写锁操作方法。分享给大家供大家参考,具体如下:最近要用到读写锁的机制,但是python2.7的自带库里居然
- 网上有许关于固定表格的标题行的文章,但是既要固定标题行又要固定标题列的却几乎没有。现我写下如下代码以供大家参考:<html> &
- 写了个JavaScript版的DateAdd、DateDiff、IsDate函数,大家评评!需要说明的是,JavaScript中IsDate
- 1、简介AI 聊天机器人使用自然语言处理 (NLP) 来帮助用户通过文本、图形或语音与 Web 服务或应用进行交互。聊天机器人可以理解自然人
- 印象中最早看老外个人网站就挺纳闷,怎么人家都没有www,这样也可以?经过不断尝试,我发现确实不录入www要快捷的多,但不清楚怎么能做到。几年
- 二维正态分布采样后,绘制置信椭圆假设二维正态分布表示为:下图为两个二维高斯分布采样后的置信椭圆和每个二维高斯分布采样100个数据点,图片为:
- 一、OS包的作用os包中的API主要可以帮助我们使用操作系统中的文件系统、权限系统、环境变量、系统进程,以及系统信号。对于类Unix的操作系
- 本文实例讲述了Python实现查找两个字典相同点的方法。分享给大家供大家参考,具体如下:问题:寻找两个字典中间相同的地方(相同的键、相同的值
- time简介世界上第一台计算机操作系统Unix是诞生于1970年,然后就开始了计算机的时间计算,所以我们计算机的时间是开始于1970年1月1
- 前面的学习中,我们已经知道了两种python的数据类型:int和str。再强调一下对数据类型的理解,这个世界是由数据组成的,数据可能是数字(
- 图片上传在项目中经常用到,几乎没有任何一个项目可以脱离图片或者是文件上传。本篇我在这向大家介绍两种常规的上传方式。(注:在这里我们仅仅是对功
- 一、基本用法Queue类实现了一个基本的先进先出容器。使用put()将元素增加到这个序列的一端,使用get()从另一端删除。具体代码如下所示
- Socket的基本背景在讨论这两个选项的区别时,我们需要知道的是BSD实现是所有socket实现的起源。基本上其他所有的系统某种程度上都参考
- 注:本篇文章主要介绍如何在 Go 语言中定义和使用自定义类型,涉及到一定的编程基础知识和语法。如有不熟悉的地方,建议先去学习相关的基础知识。
- 记录了Linux 安装python3.7.0的详细过程,供大家参考,具体内容如下我这里使用的时centos7-mini,centos系统本身
- 前言:索引下推(ICP)是针对MySQL使用索引从表中检索数据行的情况的优在没有索引下推的情况下,MySQL通过存储引擎遍历索引来定位表中的
- bootstrap自带的响应式导航栏是向下滑动的,有时满足不了个性化的需求,需要做一个类似于android drawerLayout 侧滑的
- 摘要:本篇博客将详细介绍如何对YOLOv5车牌识别模型进行优化和部署。我们将讨论模型优化策略,如模型蒸馏、模型剪枝和量化等。此外,我们还将介