<!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？试试国产框架 Solon v1.11.5（带视频）

    一个更现代感的 Java 应用开发框架:更快.更小.更自由.没有 Spring,没有 Servlet,没有 JavaEE:独立的轻量生态.主框架仅 0.1 MB. @Controller public ...

  2. 基于.NetCore开发博客项目 StarBlog - (23) 文章列表接口分页、过滤、搜索、排序

    前言 上一篇留的坑,火速补上. 在之前的第6篇中,已经有初步介绍,本文做一些补充,已经搞定这部分的同学可以快速跳过,基于.NetCore开发博客项目 StarBlog - (6) 页面开发之博客文章列 ...

  3. java中的杨辉三角

    本文主要介绍如何打印杨辉三角(直角三角形),如下图所示: 规律如下: 第一行全为1,对角线元素全为1,设i表示行标,j表示列标. arr[i][0] = 1; arr[i][i] = 1; 当i &g ...

  4. uniapp 微信小程序 引入 环信聊天

    最近项目需要实现一个聊天的功能,群聊或者单聊,用到环信,根据官网实现一下相关的配置吧 第一:下载环信demo  地址:https://github.com/easemob/webim-uniapp-d ...

  5. django中只使用ModleForm的表单验证，而不使用ModleForm来渲染

    主题 众所周知,django.forms极其强大,不少的框架也借鉴了这个模式,如Scrapy.在表单验证时,django.forms是一绝,也是面向对象的经典表现.但要用它来渲染表单那就不好玩了,除非 ...

  6. 学习.NET MAUI Blazor（二）、MAUI是个啥

    随着.NET 7的发布,MAUI也正式发布了.那么MAUI是个啥?我们先来看看官方解释: .NET 多平台应用 UI (.NET MAUI) 是一个跨平台框架,用于使用 C# 和 XAML 创建本机移 ...

  7. 虚假新闻检测（CADM）《Unsupervised Domain Adaptation for COVID-19 Information Service with Contrastive Adversarial Domain Mixup》

    论文信息 论文标题:Unsupervised Domain Adaptation for COVID-19 Information Service with Contrastive Adversari ...

  8. Solon Java Framework v1.12.0 发布

    一个更现代感的 Java 应用开发框架:更快.更小.更自由.没有 Spring,没有 Servlet,没有 JavaEE:独立的轻量生态.主框架仅 0.1 MB. @Controller public ...

  9. [编程基础] C++多线程入门9-async教程和示例

    原始C++标准仅支持单线程编程.新的C++标准(称为C++11或C++0x)于2011年发布.在C++11中,引入了新的线程库.因此运行本文程序需要C++至少符合C++11标准. 文章目录 9 asy ...

  10. 阿里云kafka使用记录（python版本）

    kafka端   consumer vpc版代码   import socket from kafka import KafkaConsumer from kafka.errors import Ka ...