layui级联操作
<!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级联操作的更多相关文章
- [原创]关于Hibernate中的级联操作以及懒加载
Hibernate: 级联操作 一.简单的介绍 cascade和inverse (Employee – Department) Casade用来说明当对主对象进行某种操作时是否对其关联的从对象也作类似 ...
- Java三大框架之——Hibernate关联映射与级联操作
什么是Hibernate中的关联映射? 简单来说Hibernate是ORM映射的持久层框架,全称是(Object Relational Mapping),即对象关系映射. 它将数据库中的表映射成对应的 ...
- Hibernate(八)__级联操作、struts+hibernate+接口编程架构
级联操作 所谓级联操作就是说,当你进行主对象某个操作时,从对象hibernate自动完成相应操作. 比如: Department <---->Student 对象关系,我希望当我删除一个d ...
- 【EF学习笔记10】----------主从表级联操作
主从表 级联新增 Console.WriteLine("=========主从表 级联新增=========="); using (var db = new Entities()) ...
- JPA学习---第九节：JPA中的一对多双向关联与级联操作
一.一对多双向关联与级联操作 1.创建项目,配置文件代码如下: <?xml version="1.0" encoding="UTF-8"?> < ...
- hibernate 一对多操作（级联操作）
一对多级联操作 1. 级联保存 复杂写法 Company company = new Company(); company.setcName("Hello"); company. ...
- Hibernate级联操作和载入机制（二） cascade and fetch
上一篇介绍了Hibernate持久化对象时候的级联操作.本篇介绍读取时候的级联操作. 还是用上一篇的样例.一份问卷有多个问题.可是每一个问题仅仅能属于一份问卷. 我们先看測试用例: @Test pub ...
- Hibernate级联操作解密（inverse和cascade）
总结: Cascade:对级联操作进行限制,有如下几个参数: all : 所有情况下均进行关联操作. none:所有情况下均不进行关联操作.这是默认值. save-update:在执行save/u ...
- jqery对于select级联操作
问题:今天在做一个需求的时候,有一个级联操作也就是选中下拉框的一列就显示对对应的数据 处理:我在做级联的时候在option的列里面绑定click的事件发现这个事件行不通:查资料发现select触发的是 ...
- Hibernate的Cascade——级联操作
在Hibernate中,针对持久化实体的配置文件中有Cascade这样一个属性,顾名思义就是级联,也就是说在操作当 前实体时,针对当前实体的操作会影响到相应配置的关联实体.比如针对当前实体进行保存操作 ...
随机推荐
- 更强大的远程开发，Remote Tunnels 正式发布预览版！
Visual Studio Code 的核心是一个代码编辑器,它通过我们的远程开发经验与其他环境集成,变得更加强大和灵活: 你可能没有想到,但 VS Code 有一个内置的命令行界面(CLI),可以让 ...
- 在nodejs中体验http/2
前言 2015年,HTTP/2 发布,直到2021年公司的项目才开始在实践中应用:自己对http2诸多特点的理解只存在于字面上,于是尝试在nodejs中实践一下,加深自己的理解. 多路复用 同域名下所 ...
- DPDK编译与演示
环境 安装dpdk 安装依赖 环境配置 编译 遇到过的问题 dpdk使用 设置hugepage helloworld演示 遇到问题 timer演示 环境 虚拟机系统:ubuntu:1404 安装dpd ...
- 2022年7月15日，第四组，周鹏，JAVA认识的第三天，算法的第一天(╥╯^╰╥)(╥╯^╰╥)
算了,已经没有力气去创作些什么了, 8种排序方法我只会4种,剩下的以后再补. 发一个逻辑题吧: 一个村落,有50户人,在这些人中存在着n个红眼病. 在保证每人每天最少见一面的情况下,有如下规则: 1, ...
- 【转载】C#使用Dotfuscator混淆代码以及加密
C#编写的代码如果不进行一定程度的混淆和加密,那么是非常容易被反编译进行破解的,特别是对于一些商业用途的C#软件来说,因为盯着的人多,更是极易被攻破.使用Dotfuscator可以实现混淆代码.变量名 ...
- 腾讯云服务器CentOS 7.6安装基本中间件
腾讯云服务器CentOS 7.6安装基本中间件 摘要:由于最近开始学习Redis和Zookeeper了,因此使用云服务器的频率开始多了起来,并且开始了基础的安装教学,由于我之前确实没用过Linux ...
- 【MySQL】MySQL8安装
1. MySQL8安装 安装环境 操作系统:CentOS7 MySQL版本:8.0.28 安装方式:二进制Generic 软件路径:/app/database 数据路径:/data/3306 日志路径 ...
- Mac上优秀的虚拟机软件推荐 PD Parallels Desktop 18.1.1
APPERK 软件信息 软件名称 ParallelsDesktop 版本号 18.1.1 软件类型 官网版 + 商业版 安装包大小 390MB 语言 中文 系统支持 macOS11及以上(M芯片原生) ...
- 如何又快又好实现 Catalog 系统搜索能力？火山引擎 DataLeap 这样做
摘要 DataLeap 是火山引擎数智平台 VeDI 旗下的大数据研发治理套件产品,帮助用户快速完成数据集成.开发.运维.治理.资产.安全等全套数据中台建设,降低工作成本和数据维护成本.挖掘数据价 ...
- MRS_外部库相关问题汇总
解决问题如下: CH32V307使用IQMath库时 使用MRS时,当使用到math数学库 CH32V307使用IQMath库时 CH32V307是支持硬件浮点的,可以是math.h中的sinf.IQ ...