<!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. (java 实现开箱即用基于 redis 的分布式锁

    项目简介 lock 为 java 设计的分布式锁,开箱即用,纵享丝滑. 开源地址:https://github.com/houbb/lock 目的 开箱即用,支持注解式和过程式调用 基于 redis ...

  2. 我今天吃了SHI，请对下联

    最近看到不少好玩的.实用的 Github 项目,就来给大家推荐一把. 1. 跨平台终端 Tabby(前身是 Terminus) 是一个可高度配置的终端模拟器和 SSH 或串口客户端,支持 Window ...

  3. python安装与初识

    一.Linux基础 - 计算机以及日后我们开发的程序防止的服务器的简单操作 二.Python开发 http://www.cnblogs.com/wupeiqi/articles/5433893.htm ...

  4. 痞子衡嵌入式：对比恩智浦全系列MCU(包含Kinetis/LPC/i.MXRT/MCX)的GPIO电平中断设计差异

    大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家介绍的是恩智浦全系列MCU(包含Kinetis, LPC, i.MXRT, MCX)的GPIO电平中断设计差异. 在痞子衡旧文 <以i.M ...

  5. tornado原理介绍及异步非阻塞实现方式

    tornado原理介绍及异步非阻塞实现方式 以下内容根据自己实操和理解进行的整理,欢迎交流~ 在tornado的开发中,我们一般会见到以下四个组成部分. ioloop: 同一个ioloop实例运行在一 ...

  6. python之路53 ajax补充返回序列化数据，多对多创建三种方式，django内置序列化组件(drf前身)，批量操作数据，自定义分页器，form组件

    ajax补充说明 主要是针对回调函数args接收到的响应数据 1.后端request.is_ajax() 用于判断当前请求是否由ajax发出 2.后端返回的三板斧都会被args接收不再影响整个浏览器页 ...

  7. python31 网络并发编程方法

    同步与异步 用来表达任务的提交方式 同步 提交完任务之后原地等待任务的返回结果 期间不做任何事 异步 提交完任务之后不原地等待任务的返回结果 直接去做其他事 有结果自动通知 阻塞与非阻塞 用来表达任务 ...

  8. 01-Tcl基本知识

    1 Tcl基本知识 1.1 Tcl是什么? Tcl全称是Tool Command Language,是一种基于字符串的命令语言. Tcl是一种解释性语言,类似于其他脚本语言一样,直接对每条语句顺次解释 ...

  9. 克拉玛依初赛-wp

    MISC 签到 16进制转字符串 base64 再来一次base64 flag 论禅论道 7z解压得到jar 使用decom打开 解密 得到flag WEB pingme 抓包,修改POST提交的参数 ...

  10. Java 进阶P-1.1+P-1.2

    用类制造对象 对象与类 对象是实体,需要被创建,可以为我们做事情 类是规范,根据类的定义来创建对象 对象=属性+服务 数据:属性或状态 操作:函数 从这些例子可以看出来 class是提供服务的,数据是 ...