<!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. bitlocker加密如何找密钥解锁

    步骤1:在其他设备上登录[微软账号],地址:https://account.microsoft.com 步骤2:找到[自己的设备],查看[Bitlocker]密钥登录进去能看到[设备],找要解锁的那台 ...

  2. Python全栈工程师之从网页搭建入门到Flask全栈项目实战(7) - 在线问答系统

    1.项目源码/业务逻辑 百度网盘链接:链接:https://pan.baidu.com/s/13VNfrSJE6vcL3HP1J5T8ew 提取码:00s0,项目业务逻辑自行阅读 2.项目搭建 点击新 ...

  3. ArcObjects SDK开发 021 开发框架搭建-FrameWork包设计

    1.框架引擎部分 引擎模块其实就是之前我们说的App-Command-Tool模块,通过这个模块,把系统的主干框架搭建起来. 其中大部分出现在菜单以及工具条上的按钮都会继承这个框架定义ICommand ...

  4. Web3区块链DAS域名注册教程 tron trx链波卡钱包地址解析 用户名转账 ENS

    而在去中心化系统中,大部分人充值.转账时,使用的都是区块链原生的长地址,比如: ETH 的地址: 0x9euo8sHip*******dHld90 CKB 的地址: ckHUEI829D******* ...

  5. python进阶之路5之流程控制（垃圾回收机制）

    垃圾回收机制 """ 有一些语言,内存空间的申请和释放都需要程序员自己写代码才可以完成 但是python却不需要 通过垃圾回收机制自动管理 ""&qu ...

  6. C# 如何发送邮件消息

    1.安装NUGET包 MailKit 2.代码如下 using MailKit.Net.Smtp; using MimeKit; using System.Collections.Generic; u ...

  7. OpenMP 线程同步 Construct 实现原理以及源码分析（上）

    OpenMP 线程同步 Construct 实现原理以及源码分析(上) 前言 在本篇文章当中主要给大家介绍在 OpenMP 当中使用的一些同步的 construct 的实现原理,如 master, s ...

  8. SQLSERVER 的四个事务隔离级别到底怎么理解？

    一:背景 1. 讲故事 在有关SQLSERVER的各种参考资料中,经常会看到如下四种事务隔离级别. READ UNCOMMITTED READ COMMITTED SERIALIZABLE REPEA ...

  9. Flutter入门资料推荐

    前言 群里很多入门小白不知道如何入门 Flutter,水一篇文章简单介绍下本人学习过程中一些参考资料,方便 Flutter 小白少走弯路. 非权威,推荐只针对本人经验来的说,大佬们不喜勿喷! 资料列表 ...

  10. 关于计算机与常用DOS命令

    计算机 计算机 计算机由软件和硬件组成. 能够按照程序运行,自动,高速处理海量数据的现代化智能电子设备. 计算机硬件 CPU 主板 内存 电源.主机箱 硬盘 显卡 键盘.鼠标(输入设备) 显示器(输出 ...