解决使用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异步操作MySQL。分享给大家供大家参考,具体如下:安装aiomysql依赖Python3.4+asyncioPy
- mark标记在实际工作中,我们要写的自动化用例会比较多,也不会都放在一个py文件中,如果有几十个py文件,上百个方法,而我们只想运行当中部分
- 关于redis安装,pip install django-redis-sessions,按照提示进行安装相关的服务端和客户端.django版
- 随着国家发展,中国很多城市的空气质量其实并不好,国家气象局会有实时统计,但是要去写爬虫爬取是十分麻烦的事情,并且官方网站也会做一些反爬虫措施
- 前提:我训练的是二分类网络,使用语言为pytorchVaribale包含三个属性:data:存储了Tensor,是本体的数据grad:保存了
- 测试环境为Windows 10 系统,Python3.7,转换需要提前安装pydub、ffmpeg,安装和加入环境变量配置方法自行解决,至于
- 最近在开发一个web应用中需要用到带搜索功能下拉框,曾经尝试网上的django 包, django-select2-forms, 这是款功能
- 之前呢,我一直对GUI不是很感兴趣,但是呢,最近由于某些特殊原因,导致不得不用tkinter,需要实现一个渐变色,但是当我翻阅文档的时候,却
- Python3异步asyncio问题官方文档:https://docs.python.org/zh-cn/3/library/asyncio
- 有时候我们要去别的接口取数据,可能因为网络原因偶尔失败,为了能自动重试,写了这么一个装饰器。这个是python2.7x 的版本,python
- 概述🌱记住日期是有点困难,但我们是程序员,使困难的事情更容易是我们唯一的工作,所以我们不记得日期为什么不自动化这个任务。在这篇文章中,我们将
- 你的设计为什么平平无奇,为什么吸引不到别人的眼球,这里先来说说什么是焦点(也可以称兴趣中心或者视觉中心),我认为用焦点更能简单准确的阐述。有
- 最近对微格式进行了一些学习,在学习过程中收获不少。在此分享下,欢迎交流!微型格式的优点:1,语义化的HTML和CSS类名称来标记共同内容。2
- 1. 需求:用户答题练习,当用户获取所有题目的同时,需要判断用户是否已经做过该题目,如果做过,需要render的时候添加一个“回顾”按钮。2
- 1. 规范简介本规范主要规定ASP源程序在书写过程中所应遵循的规则及注意事项。编写该规范的目的是使项目开发人员的源代码书写习惯保持一致。这样
- 前言JSon 数据中的String 传递数据时,需要处理好特殊字符.本文主要给大家总结介绍了关于golang、rust、java和Pytho
- 1.首先在pycharm上使用pip安装pip install html-table pip install jira2.初始化发件人邮箱,
- python 统计代码行数简单实例送测的时候,发现需要统计代码行数于是写了个小程序统计自己的代码的行数。#calclate_co
- PHP mysqli_stat() 函数创建 SSL 连接:<?php// 假定数据库用户名:root,密码:123456,数据库:c
- 众所周知,Python开发框架大大减少了开发者不必要的重复劳动,提高了项目开发效率的同时,还使得创建的程序更加稳定。目前比较主流的Pytho