<!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. Leetcode 42.接雨水

    接雨水 给定 n 个非负整数表示每个宽度为 1 的柱子的高度图,计算按此排列的柱子,下雨之后能接多少雨水. 上面是由数组 [0,1,0,2,1,0,1,3,2,1,2,1] 表示的高度图,在这种情况下 ...

  2. Anton and Permutation

    Anton and Permutation time limit per test 4 seconds memory limit per test 512 megabytes input standa ...

  3. 给sunpinyin加速

    因为sunpinyin词库一大就会卡,因此需要自己添加一个脚本给sunpinyin加速. 加速的原理就是把词库添加到内存,现在内存都这么大,根本不在乎这么几兆,当然输入体验更重要啦- 首先先建一个脚本 ...

  4. hdu_1018_Big Number_201308191556

    Big NumberTime Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total S ...

  5. C - Reading comprehension 二分法 求等比数列前N项和

    Read the program below carefully then answer the question. #pragma comment(linker, "/STACK:1024 ...

  6. 任务调度分配题两道 POJ 1973 POJ 1180（斜率优化复习）

    POJ 1973 这道题以前做过的.今儿重做一次.由于每个程序员要么做A,要么做B,可以联想到0/1背包(谢谢N巨).这样,可以设状态 dp[i][j]为i个程序员做j个A项目同时,最多可做多少个B项 ...

  7. 软件测试之怎么避免Bug漏测？

    一.对需求评审阶段,对业务需求细节理解不明确,未深入挖掘隐含拓展需求 改进措施 需求评审前,我们应该先仔细阅读prd及交互文档,先形成自己对产品的思考,通过脑图的方式列出对产品设计的疑问点,从用户或者 ...

  8. 菜鸟nginx源代码剖析数据结构篇（十） 自旋锁ngx_spinlock

    菜鸟nginx源代码剖析数据结构篇(十) 自旋锁ngx_spinlock Author:Echo Chen(陈斌) Email:chenb19870707@gmail.com Blog:Blog.cs ...

  9. 南昌互联网行业协会筹办者祝真和华罡团队-2014年12月江西IDC排行榜

     他出自军营,拥有一身正气. 他在南昌创业,立意卓越. 从站点開始.到微营销.到线上教育,全面开花. 他在朋友圈看到不对的内容,就会即时批评. 他对朋友,又是很的和蔼可亲. 他就是南昌华罡网络创办 ...

  10. [ACM] ZOJ 3819 Average Score (水题）

    Average Score Time Limit: 2 Seconds      Memory Limit: 65536 KB Bob is a freshman in Marjar Universi ...