<!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. Linux学习总结（13）——在阿里云的ubuntu上部署个人服务

    作为一个IT界的人,一般都希望有一个独立的博客,或者一部独立的机器.所以我一直在找机会,拥有一台自己可以独立控制的机器,自己想干嘛干嘛.当然这在虚拟机或者自己的PC上面也可以实现,但是这跟一台一直开着 ...

  2. JavaSE 学习笔记之String字符串（十四）

    API:(Application Programming Interface,应用程序编程接口)是一些预先定义的函数,目的是提供应用程序与开发人员基于某软件或硬件的以访问一组例程的能力,而又无需访问源 ...

  3. noip模拟赛 Massacre at Béziers

    题目背景 下发压缩包链接: https://pan.baidu.com/s/1geC4ooz 密码: 3vpt 所有的一切———所有的一切都被染成了红与黑. 翻卷的红莲烈焰舔舐着大地,释放出异抽的黑烟 ...

  4. Linux中安装MongoDB出现的问题记录

    mongoDB安装完成后,运行sudo service mongod start 查看程序状态:ps ajx | grep mongod   ,启动失败 查看失败信息提示,终端命令:tail -f / ...

  5. Jquery书写ajax

    根据API学习本章 Jquery书写ajax 使用ajax发送表单到servlet,发送时显示等待图片,servlet处理完返回信息,在页面显示返回信息,并且隐藏等待图片 <%@ page la ...

  6. 【原创】TCP超时重传机制探索

    TCP超时重传机制探索 作者:tll (360电商技术) 1)通信模型 TCP(Transmission Control Protocol)是一种可靠传输协议.在传输过程中当发送方(sender)向接 ...

  7. Android---keycode值以及相应名称

    KEYCODE列表 电话键 键名 描写叙述 键值   KEYCODE_CALL 拨号键 5 KEYCODE_ENDCALL 挂机键 6 KEYCODE_HOME 按键Home 3 KEYCODE_ME ...

  8. Java-CyclicBarrier的简单样例

    内容:一个主任务等待两个子任务,通过CyclicBarrier的await()实现.此Runnable任务在CyclicBarrier的数目达到后,全部其他线程被唤醒前被运行. public clas ...

  9. java输出双引号

    java输出双引号 直接看例子 //输出双引号 public class Test { public static void main(String[] args) { System.out.prin ...

  10. HDU 2665(主席树，无修改第k小）

    Kth number                                                 Time Limit: 15000/5000 MS (Java/Others)   ...