<!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. 洛谷 P2155 BZOJ 2186 codevs 2301 [SDOI2008]沙拉公主的困惑

    题目描述 大富翁国因为通货膨胀,以及假钞泛滥,政府决定推出一项新的政策:现有钞票编号范围为1到N的阶乘,但是,政府只发行编号与M!互质的钞票.房地产第一大户沙拉公主决定预测一下大富翁国现在所有真钞票的 ...

  2. 本地数据文件加载到hive表

    1.在test数据库下创建表格 hive> create table vod_record_all( > watch_time date, > device_id string, & ...

  3. 3.2 Piecewise Linear Interpolation（站点）

    Newton Interpolation: https://www.youtube.com/watch? v=EyRQXA56asI Piecewise Linear Interpolation: h ...

  4. IntelliJ IDEA中出现could not auto wired错误提示处理方式

    IntelliJ IDEA中出现could not auto wired错误提示处理方式 程序可以正常运行,就是出现错误提示: 学习了:http://blog.csdn.net/xlxxybz1314 ...

  5. 启动spring boot项目

    启动spring boot项目 pom.xml如下: <?xml version="1.0" encoding="UTF-8"?> <proj ...

  6. 【JavaScript】离开页面前提示

    离开页面前的提示不能够用onunload去做,由于它仅仅是兼容IE,你要兼容Google与FireFox就蛋疼了. 并且这个事件还是关闭之后才会触发的. 取而代之能够用onbeforeunload去实 ...

  7. [WebGL入门]二十三，反射光的光照效果

    注:文章译自http://wgld.org/,原作者杉本雅広(doxas).文章中假设有我的额外说明.我会加上［lufy:］,另外,鄙人webgl研究还不够深入.一些专业词语.假设翻译有误.欢迎大家指 ...

  8. [CTSC 2008] 祭祀

    [题目链接] https://www.lydsy.com/JudgeOnline/problem.php?id=1143 [算法] 答案为最小路径可重复点覆盖所包含的路径数,将原图G进行弗洛伊德传递闭 ...

  9. B2241 打地鼠 暴力模拟

    大水题!!!30分钟AC(算上思考时间),直接模拟就行,加一个判断约数的剪枝,再多加几个剪枝就可以过(数据巨水) 我也就会做暴力的题了. 题干: Description 打地鼠是这样的一个游戏:地面上 ...

  10. expectation-maximization algorithm ---- PRML读书笔记

    An elegant and powerful method for finding maximum likelihood solutions for models with latent varia ...