<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <link rel="stylesheet" href="/common/lib/layui-v2.5.5/css/layui.css" media="all">

    <script src="/common/lib/layui-v2.5.5/layui.js" charset="utf-8"></script>

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

    <title></title>

</head>

<body>

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

    <div>

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

            <label class="layui-form-label">选择city</label>

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

                <select name="cityname" id="cityid" lay-verify="required" lay-filter="cityfilter">

                    <option value=""></option>

                    <option value="0">北京</option>

                    <option value="1">上海</option>

                    <option value="2">广州</option>

                    <option value="3">深圳</option>

                    <option value="4">杭州</option>

                </select>

            </div>

        </div>

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

            <label class="layui-form-label">选择区域</label>

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

                <select name="quyuname" id="quyuid" lay-verify="required" lay-filter="quyufilter"></select>

            </div>

        </div>

    </div>

    <script>

        layui.use('form', function () {

            var form = layui.form;

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

                if (data.value == "") {

                    $('#quyuid').html('<option value="">请选择区域</option>');

                    layui.form.render("select");

                }

                else {

                    if (data.value == "0") {

                        $('#quyuid').html('<option value="">请选择区域</option>')

                        $('#quyuid').append(new Option("北京1", 0));

                        $('#quyuid').append(new Option("北京2", 1));

                        $('#quyuid').append(new Option("北京3", 2));

                        $('#quyuid').append(new Option("北京4", 3));

                    }

                    else if (data.value == "1") {

                        $('#quyuid').html('<option value="">请选择区域</option>')

                        $('#quyuid').append(new Option("上海1", 0));

                        $('#quyuid').append(new Option("上海2", 1));

                        $('#quyuid').append(new Option("上海3", 2));

                        $('#quyuid').append(new Option("上海4", 3));

                    }

                    else if (data.value == "2") {

                        $('#quyuid').html('<option value="">请选择区域</option>')

                        $('#quyuid').append(new Option("广州1", 0));

                        $('#quyuid').append(new Option("广州2", 1));

                        $('#quyuid').append(new Option("广州3", 2));

                        $('#quyuid').append(new Option("广州4", 3));

                    }

                    else if (data.value == "3") {

                        $('#quyuid').html('<option value="">请选择区域</option>')

                        $('#quyuid').append(new Option("深圳1", 0));

                        $('#quyuid').append(new Option("深圳2", 1));

                        $('#quyuid').append(new Option("深圳3", 2));

                        $('#quyuid').append(new Option("深圳4", 3));

                    }

                    else if (data.value == "4") {

                        $('#quyuid').html('<option value="">请选择区域</option>')

                        $('#quyuid').append(new Option("杭州1", 0));

                        $('#quyuid').append(new Option("杭州2", 1));

                        $('#quyuid').append(new Option("杭州3", 2));

                        $('#quyuid').append(new Option("杭州4", 3));

                    }

                    layui.form.render("select");

//$.getJSON('@Url.Action("GetSelectCommunity", "Values", new { httproute = "DefaultApi", area = "" })' + "?id=" + data.value, function (data) {

// $('#ownscommunityId1').html('<option value="">请选择社区/村</option>')

// $.each(data, function (index, item) {

// $('#ownscommunityId1').append(new Option(item.Name, item.Code));// 下拉菜单里添加元素

// });

// layui.form.render("select");

//});

                }

            });

        });

    </script>

</form>

</body>

</html>

　　

layui级联操作的更多相关文章

  1. [原创]关于Hibernate中的级联操作以及懒加载

    Hibernate: 级联操作 一.简单的介绍 cascade和inverse (Employee – Department) Casade用来说明当对主对象进行某种操作时是否对其关联的从对象也作类似 ...

  2. Java三大框架之——Hibernate关联映射与级联操作

    什么是Hibernate中的关联映射? 简单来说Hibernate是ORM映射的持久层框架,全称是(Object Relational Mapping),即对象关系映射. 它将数据库中的表映射成对应的 ...

  3. Hibernate(八)__级联操作、struts+hibernate+接口编程架构

    级联操作 所谓级联操作就是说,当你进行主对象某个操作时,从对象hibernate自动完成相应操作. 比如: Department <---->Student 对象关系,我希望当我删除一个d ...

  4. 【EF学习笔记10】----------主从表级联操作

    主从表 级联新增 Console.WriteLine("=========主从表 级联新增=========="); using (var db = new Entities()) ...

  5. JPA学习---第九节：JPA中的一对多双向关联与级联操作

    一.一对多双向关联与级联操作 1.创建项目,配置文件代码如下: <?xml version="1.0" encoding="UTF-8"?> < ...

  6. hibernate 一对多操作（级联操作）

    一对多级联操作 1.  级联保存 复杂写法 Company company = new Company(); company.setcName("Hello"); company. ...

  7. Hibernate级联操作和载入机制（二） cascade and fetch

    上一篇介绍了Hibernate持久化对象时候的级联操作.本篇介绍读取时候的级联操作. 还是用上一篇的样例.一份问卷有多个问题.可是每一个问题仅仅能属于一份问卷. 我们先看測试用例: @Test pub ...

  8. Hibernate级联操作解密（inverse和cascade）

    总结: Cascade:对级联操作进行限制,有如下几个参数: all : 所有情况下均进行关联操作.  none:所有情况下均不进行关联操作.这是默认值.  save-update:在执行save/u ...

  9. jqery对于select级联操作

    问题:今天在做一个需求的时候,有一个级联操作也就是选中下拉框的一列就显示对对应的数据 处理:我在做级联的时候在option的列里面绑定click的事件发现这个事件行不通:查资料发现select触发的是 ...

  10. Hibernate的Cascade——级联操作

    在Hibernate中,针对持久化实体的配置文件中有Cascade这样一个属性,顾名思义就是级联,也就是说在操作当 前实体时,针对当前实体的操作会影响到相应配置的关联实体.比如针对当前实体进行保存操作 ...

随机推荐

  1. vue elementui弹框内 富文本编辑器的使用，及踩坑

    最近vue项目中遇到弹框内使用富文本编辑器,遇到最大的问题是,在打开弹框后才能创建富文本编辑器,并且只能创建一次,多次点击弹框,报错: Error in v-on handler: "Err ...

  2. 使用xshell连接linux虚拟机

    目录 1.涉及的软件 2.连接步骤 2.1.虚拟机网络连接设置 2.2.配置linux的ip地址 2.3.关闭linux的防火墙 2.4.启动ssh服务 2.5.使用xshell连接linux 1.涉 ...

  3. [python]《Python编程快速上手:让繁琐工作自动化》学习笔记1

    1. 模式匹配与正则表达式笔记(第7章)(代码下载) 正则表达式,又称规则表达式.(英语:Regular Expression,在代码中常简写为regex.regexp或RE),计算机科学的一个概念. ...

  4. linux下redis_单机版_主从_集群_部署文档

    一 单机版部署 1.1 Redis下载地址 http://download.redis.io/releases/ 本次部署版本:3.2.8 当前最新版本:5.0.5 1.2 安装 部署路径说明规划 / ...

  5. 《Effective C++》再次探索traits技法

    首先介绍C++标准程序库中的五种迭代器,关于这个可以看我的另一个笔记:http://blog.csdn.net/m0_37316917/article/details/70053513. 对于这五种分 ...

  6. Miller_Rabin质数测试

    数论 Miller_Rabin质数测试 作用 当需要判断一个数字是否是质数时,又发现数字过大,\(0(\sqrt n)\)难以承受的时候,就可以使用Miller_Rabin质数测试 基本定理 定理一, ...

  7. vulnhub靶场之FUNBOX: GAOKAO

    准备: 攻击机:虚拟机kali.本机win10. 靶机:Funbox: GaoKao,下载地址:https://download.vulnhub.com/funbox/FunboxGaoKao.ova ...

  8. Add All&shuffle-sort(List)

    Add All&shuffle Collections常用功能 java.utils.collections是集合工具类,用来对集合进行操作.部分方法如下︰ public static < ...

  9. HelloWorld的常见问题与Notepad++使用-程序注释与Hello World说明

    HelloWorld的常见问题与Notepad++使用 编译和运行是两回事 编译:是指将我们编写的Java源文件翻译成JVM认识的class文件,在这个过程中, javac 编译器会检查我们 所写的程 ...

  10. 财务精度：BigInteger 与 BigDecimal

    财务精度:BigInteger 与 BigDecimal 每博一文案 师父说: 人这一辈子,真地好难. 有些人,好着好着,忽然就变陌生了,有些手,牵着牵着,瞬间就放开了,有些路,走着走着,就失去了方向 ...