<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>layui</title>

    <meta name="renderer" content="webkit">

    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    <link href="layui/css/layui.css" rel="stylesheet" />

</head>

<body>

    <form class="layui-form" action="">

        <div class="layui-form-item">

            <div class="layui-inline">

                <label class="layui-form-label">搜索选择框</label>

                <div class="layui-input-inline">

                    <select name="modules" lay-verify="required" lay-search="" lay-filter="test">

                        <option value="">直接选择或搜索选择</option>

                        <option value="1">11</option>

                        <option value="2">22</option>

                        <option value="3">33</option>

                        <option value="4">44</option>

                        <option value="5">55</option>

                        <option value="6">66</option>

                        <option value="7">77</option>

                        <option value="8">88</option>

                    </select>

                </div>

            </div>

        </div>

        <div class="layui-form-item">

            <div class="layui-inline">

                <label class="layui-form-label">搜索选择框</label>

                <div class="layui-input-inline">

                    <select name="modules" lay-verify="required" lay-search="" id="test">

                        <option value="">直接选择或搜索选择</option>

                    </select>

                </div>

            </div>

        </div>

    </form>

    <script src="jquery-3.2.1.min.js"></script>

    <script src="layui/layui.js"></script>

    <!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->

    <script>

        layui.use(['form', 'layedit', 'laydate'], function () {

            var form = layui.form

                , layer = layui.layer

                , layedit = layui.layedit

                , laydate = layui.laydate;

            //日期

            laydate.render({

                elem: '#date'

            });

            laydate.render({

                elem: '#date1'

            });

            //创建一个编辑器

            var editIndex = layedit.build('LAY_demo_editor');

            //自定义验证规则

            form.verify({

                title: function (value) {

                    if (value.length < 5) {

                        return '标题至少得5个字符啊';

                    }

                }

                , pass: [/(.+){6,12}$/, '密码必须6到12位']

                , content: function (value) {

                    layedit.sync(editIndex);

                }

            });

            //监听指定开关

            form.on('switch(switchTest)', function (data) {

                layer.msg('开关checked：' + (this.checked ? 'true' : 'false'), {

                    offset: '6px'

                });

                layer.tips('温馨提示：请注意开关状态的文字可以随意定义，而不仅仅是ON|OFF', data.othis)

            });

            //监听提交

            form.on('submit(demo1)', function (data) {

                layer.alert(JSON.stringify(data.field), {

                    title: '最终的提交信息'

                })

                return false;

            });

            form.on('select()', function (data) {

                $("#test").empty();

                var html = "<option value='1000'>1000</option>";

                $("#test").append(html);

                form.render(); //窗体重新呈现

            });

        });

    </script>

</body>

</html>

jq 替换DOM layeui 不刷新的更多相关文章

  1. 有了jsRender，妈妈再也不用担心我用jq拼接DOM拼接的一团糟了、页面整齐了、其他伙伴读代码也不那么费劲了

    写在前面 说来也很巧, 下午再做一个页面,再普通不过的分页列表,我还是像往常一样,基于MVC环境下,我正常用PagedList.MVC AJAX做无刷新分页,这时候问题就来了,列表数据中有个轮播图用到 ...

  2. jQuery学习-css、class操作、动画方法的运用、jQ操作Dom节点

    css操作(设置单个/多个样式.获取样式) //修改单个属性:括号之中直接是需要修改的样式名,值 css(name,value) //例:$("#one").css("b ...

  3. js增加、删除、替换DOM对象

    当网页被加载时,浏览器会创建页面的文档对象模型DOM,即Document Object Model 整个文档为一个文档节点(document对象) 每个html元素为一个元素节点(element对象) ...

  4. JQ替换标签与内容

    JQ: $('#Status').replaceWith(function () { return $("<select ><option value='0'>未认证 ...

  5. js/jq和a标签（刷新/ajax/对话框/循环/select选中/checkbox选中/id的获取//数据处理成钱的格式）//js/jq分页

    1.刷新 <a href="javascript:history.go(-1)">返回上一页</a><a href="javascript: ...

  6. Notepad++ 常用功能：批量取消替换换行、强制刷新数据

    批量取消替换换行 换行批量替换成空格 Ctrl+F 打开查找替换窗口,使用:\r\n 替换成 空格,全部替换 强制刷新数据源,重新加载数据 快捷键:Ctrl+R 或者 Alt+F 然后 L 或者点击菜 ...

  7. jq分页异步刷新 ，全局刷新问题

    在做分页的时候,可能点击下一页全部刷新 这样写会导致动态刷新,页面全部刷新了 $("#pageList a").click(function () { var $s = $(thi ...

  8. JQ 替换节点

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. js实现类型jq的dom加载完成

    有时候我们只想在 dom 加载完成后运行 js ,而不是等所有图片加载完成.所以不需要 onload , onload 会加载图片等其他媒体.很消耗时间. 原:http://blog.csdn.net ...

随机推荐

  1. [Cogs727] [网络流24题#2] 太空飞行计划 [网络流，最小割]

    建图:源点—(w[i])—>实验—(∞)—>仪器—(cost[i])—>汇点, 如果该实验造成收益,则仪器到汇点的边在最小割中, 如果该实验造成损失,则源点到实验的边在最小割中, 故 ...

  2. N天学习一个linux命令之kill

    用途 用于终止进程 用法 kill [-s signal|-p] [--] pid... kill -l [signal] 说明 1.默认发送信号15(请求终止进程,程序可以捕获,操作系统会杀死没有对 ...

  3. cocos2d js ClippingNode 制作标题闪亮特效

    1.效果图: 之前在<Android 高仿 IOS7 IPhone 解锁 Slide To Unlock>中制作了文字上闪亮移动的效果,这次我们来看下怎样在cocos2d js 中做出类似 ...

  4. 用CSS3实现带有阴影效果和颜色渐变的按钮

    这里讲下如何利用css3里的两个新属性 box-shadow和transition来实现如下所示的带有阴影和颜色渐变效果的按钮(下面这个只是图片:本想直接在这个页面下嵌html的,,试了后发现有些cs ...

  5. WPF学习笔记——ListBox用ItemsSource绑定数据源

    作为一个WPF初学者,感到困难重重.在网上想查个ListBox绑定数据源的示例,结果出来一大堆代码,一看心就烦. 我给个简洁一点的代码: 后台代码: protected class UserItem ...

  6. 设置用root用户telnet到linux系统

    默认情况下,ROOT用户不能以telnet方式连接Linux操作系统,而且也是不安全的．但从技术上来讲,是可以实现的． #mv /etc/securetty /etc/securetty.bak 保存 ...

  7. 移动互联网App推广的十大难题

    常常有朋友来问."我做了一个App,请问怎么推广啊?"或者就是"我们公司开发了一个App.想短时间内获取巨大的量."还有的就是问"有没有什么好渠道三个 ...

  8. luogu2331 [SCOI2005]最大子矩阵

    题目大意 这里有一个n*m的矩阵,请你选出其中k个子矩阵,使得这个k个子矩阵分值之和最大.注意:选出的k个子矩阵不能相互重叠.1≤n≤100,1≤m≤2,1≤k≤10. 思路 #include < ...

  9. C++重载运算符简单总结

    当运算符作用于类类型的运算对象时,可以通过运算符重载重新定义该运算符的含义.明智的使用运算符重载能令我们的程序更易于编写和阅读. 一.基本概念 什么是运算符重载?重载的运算符是具有特殊名字的函数:它们 ...

  10. hdu 1874(最短路 Dilkstra +优先队列优化+spfa）

    畅通工程续 Time Limit: 3000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submi ...