<!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. nyoj_216_A problem is easy_201312051117

    A  problem is easy 时间限制:1000 ms  |           内存限制:65535 KB 难度:3   描述 When Teddy was a child , he was ...

  2. HDU 4533

    一道好题.想了好久没想出来,只是觉得总要二分独立处理矩形.感觉自己在把问题转化为数学公式以及分解问题的方面的能力很不足. http://blog.csdn.net/wh2124335/article/ ...

  3. [CSS3] Use Sticky Positioning for Section Headers

    We can take advantage of sticky positioning to keep a section header at the top of the page while th ...

  4. JS推断是否为JSON对象及是否存在某字段

    $.ajax({ type: 'POST', url: url, success(function(data){ //推断是否为JSON对象 if(typeof(data) == "obje ...

  5. oracle强化练习之单行函数

    1.      显示dname和loc中间用-分隔 Select dname ||'-'|| loc From dept; 2.      将部门名称左填充为10位 Select lpad( dnam ...

  6. Ural 1353 Milliard Vasya&#39;s Function（DP）

    题目地址:Ural 1353 定义dp[i][j].表示当前位数为i位时,各位数和为j的个数. 对于第i位数来说.总能够看成在前i-1位后面加上一个0~9.所以状态转移方程就非常easy出来了: dp ...

  7. 欢聚时代校园招聘java开发一面经历

    收到yy短信通知笔试通过后隔天就一面了,面试时间是下午1点半,跟另外一个同学在1点半的时候已经到了目的酒店,发现面试都集中在一个大厅,摆了非常多桌椅,由不同的面试关在面试.等到2点多的时候才到我.先说 ...

  8. javascript 打印函数名称和被引用的函数

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

  9. Android 高亮指示层提示

    此库出自翔神之手   用起来绝对方便 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0J ...

  10. 学习笔记—— 一些UPDATE语句

    UPDATE语句原来还有许多种写法,有的还很复杂,孤陋寡闻的我甚至闻所未闻.幸甚至哉,记而志之. 0.UPDATE 表名 SET 字段... FROM ...的方式 USE AdventureWork ...