使用layui 和 jquery 问题小结
问题
1 在使用 layui 2.2.5 之前,可以引入最新版的 jquery ,使用更好的性能。也可以使用layui 的jquery内部版本。如果引入要在引入layui.js 之前引入
2 使用 select 的动态添加 option 元素时,一直不能渲染出来。后来上网查看资料,发现在更新过表单元素后要使用 form.render() 重新渲染。代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>layuitest</title>
<link rel="stylesheet" href="../js/layui/css/layui.css">
<script src="../js/jquery/jquery-3.3.1.min.js"></script>
<script src="../js/layui/layui.js"></script> </head>
<body> <div class="layui-form ">
<form>
<div class="layui-form-item">
<label class="layui-form-label">城市</label>
<div class="layui-input-block">
<select name="city" id="label_select">
<option value="">请选择城市</option>
<option value="">北京</option>
<option value="">上海</option> </select>
</div>
</div> </form>
</div> <script> $(function () {
layui.use(["layer","form"],function () {
var layer = layui.layer,
form = layui.form; $("#btnAppend").click(function () {
var html = '<p>good</p>';
$("#testId").append(html); }); var html = "<option value='3'>深圳</option>" ;
$("#label_select").append(html);
layer.msg("添加了元素");
form.render(); })
});
</script> </body>
</html>
页面加载后就会动态添加选项
使用layui 和 jquery 问题小结的更多相关文章
- Jquery Mobile 小结
第一次做一个移动站点,当时纠结选Jquery Mobile还是Zepto,Zepto相对于JM更加轻巧,语法上面也很相似,但考虑到时间问题和JM自带了很多组件(Bootstrap惯出来的),还是选择了 ...
- layui利用jQuery设置下拉列表的值
今天在利用jQuery动态设置下拉列表的值的时候确怎么也赋值不上去,其中用到了layui框架,源代码如下: $.post(contextPath+'/courseLibrary/getCourseBa ...
- layui和jquery冲突:Syntax error, unrecognized expression: +
问题 layui创建table数据表格,但点击第二页时控制台报错,错误信息如下: 解决方法 https://fly.layui.com/jie/24224/ http://www.layui.com/ ...
- layui与jQuery一起使用
1,先导入jquery <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2 ...
- jQuery用法小结
jQuery加载1.$(document).ready()2.添加css样式:单个:$("p").css("color","red"); 多 ...
- jQuery学习小结3——AJAX
一.jQuery的Ajax方法 jQuery对Ajax 做了大量的封装,使用起来也较为方便,不需要去考虑浏览器兼容性.对于封装的方式,jQuery 采用了三层封装: 最底层的封装方法为——$.ajax ...
- jQuery学习小结2——动画
一.基础动画 方法名 说明 show([speed,[easing],[fn]])hide([speed,[easing],[fn]]) speed:三种预定速度之一的字符串("slow&q ...
- jQuery学习小结1-CSS操作+事件
一.DOM对象和jQuery 对象互换 1.jQuery对象 就是通过jQuery包装DOM对象后产生的对象.jQuery对象是jQuery独有的,其可以使用jQuery里的方法.比如: $(&quo ...
- Jquery 使用小结
JQuery API中文档地址:http://www.hemin.cn/jq/index.html JQuery 中文社区:http://www.jquery.org.cn/ 1.siblings() ...
随机推荐
- WebRTC互联网实时通信
muaz-khan/WebRTC-Experiment WebRTC, WebRTC and WebRTC. Everything here is all about WebRTC!! Updated ...
- shell alias添加别名使用
大家一定知道SHELL的基本用法,那么著名的命令:`ll`是代表`ls -l`,那么是怎么实现的哪?其实是添加了一个别名alias ll="ls -l" 我使用alias最多的地方 ...
- 【Zookeeper】源码分析之持久化(一)之FileTxnLog
一.前言 前一篇已经分析了序列化,这篇接着分析Zookeeper的持久化过程源码,持久化对于数据的存储至关重要,下面进行详细分析. 二.持久化总体框架 持久化的类主要在包org.apache.zook ...
- 解决 ERROR in native method: JDWP No transports initialized, jvmtiError=AGENT_ERROR_TRANSPORT_INIT(197)
在/etc/hosts文件中加入下面一行内容 127.0.0.1 localhost.localdomain localhost
- SpringMVC学习笔记八:文件上传下载(转)
转自:http://www.cnblogs.com/WJ-163/p/6269409.html 一.关键步骤 ①引入核心JAR文件 SpringMVC实现文件上传,需要再添加两个jar包.一个是文件上 ...
- Java内存区域与各区域OOM
转载请注明原文地址:http://www.cnblogs.com/ygj0930/p/6534990.html JVM的组成在上一篇博文已经介绍了,现在我们专门深入Java运行时数据区. 1:程序计 ...
- Android File Transfer
about a question in developing.. When you run app and created a file of db,but Android File Transfer ...
- ACE中的参数截断工具-truncate
变量截断工具是将类型A变量赋予类型B变量时使用,可自行判断变量是否需要截断,并且自动进行类型转换. 其全部为c实现 其入口为: ACE_Utils::truncate_cast<int> ...
- IBM应该请我去做Domino产品设计架构师
作者: 亓锋 2012年11月19日16:56 来源: 速途专栏 ...
- 最大整数(Noip1998连接多位数)
最大整数(Noip1998连接多位数)[问题描述] 设有n个正整数(n≤20),将它们联接成一排,组成一个最大的多位整数. 例如:n=3时,3个整数13,312,343联接成的最大整数为:343312 ...