<!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. elasticsearch global 、 filters 和 cardinality 聚合

    目录 1. 背景 2.解释 1.global 2.filters 3.cardinality 3.需求 4.前置条件 4.1 创建mapping 4.2 准备数据 5.实现3的需求 5.1 dsl 5 ...

  2. 计算存储分离在京东云消息中间件JCQ上的应用

    作者:田寄远 JCQ 全名 JD Cloud Message Queue,是京东云自研.具有 CloudNative 特性的分布式消息中间件. JCQ 设计初衷即为适应云特性的消息中间件:具有高可用. ...

  3. MongoDB从入门到实战之MongoDB快速入门

    前言 上一章节主要概述了MongoDB的优劣势.应用场景和发展史.这一章节将快速的概述一下MongoDB的基本概念,带领大家快速入门MongoDB这个文档型的NoSQL数据库. MongoDB从入门到 ...

  4. [0x11] 131.直方图中最大的矩形【单调栈】

    题意 link(more:SPOJ1805) 如图,在水平线上有 \(n(n\leqslant10^5)\) 个宽度为 1 ,高度为 \(h(0\leqslant h\leqslant10^9)\) ...

  5. [cocos2d-x]捕鱼达人炮台射击角度的旋转实现

    话不多说,先上图,下面是实现代码(在后面会具体讲解实现过程): //第一步:将炮台的坐标转换为世界坐标下的坐标点 CCPoint location = this->getParent()-> ...

  6. 网络安全之frp内网穿透

    前言 内网穿透,也即 NAT 穿透,进行 NAT 穿透是为了使具有某一个特定源 IP 地址和源端口号的数据包不被 NAT 设备屏蔽而正确路由到内网主机 环境需求 一台公网服务器(linux操作系统) ...

  7. 低版本客户端连接高版本数据库报错ORA-28040、ORA-01017

    测试环境: 客户端:Oracle 11.2.0.1 服务端:Oracle 19.16 测试过程: 1.低版本客户端连接高版本数据库报错ORA-28040 2.低版本客户端连接高版本数据库报错ORA-0 ...

  8. DML_修改数据

    DML_修改数据 修改数据: 语法: update 表名 set 列名1 = 值1,列名2 = 值2, ... [ where 条件 ] ; 注意: 1. 如果不加任何条件,则会将表中所有记录全部修改 ...

  9. vue学习笔记（一） ---- vue指令（过滤器）

    一.什么是过滤器 官方文档:https://cn.vuejs.org/v2/guide/filters.html 二.过滤器的使用 没有使用过滤器之前: <div id="app&qu ...

  10. SpringBoot Test Junit 联用

    需要导入SpringBoot test和junit的包 @RunWith(SpringRunner.class) @SpringBootTest(classes = PiYuApplication.c ...