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这样一个属性,顾名思义就是级联,也就是说在操作当 前实体时,针对当前实体的操作会影响到相应配置的关联实体.比如针对当前实体进行保存操作 ...
随机推荐
- 2020-12-16HDOJ-ACMsteps笔记
1.1.5 Problem Description Your task is to calculate the sum of some integers. Input Input contains a ...
- PowerDotNet平台化软件架构设计与实现系列（14）：平台建设指南
软件开发中常见的几种不同服务模型包括SaaS(软件即服务).LaaS(许可即服务).PaaS(平台即服务).CaaS(容器即服务).IaaS(基础设施即服务)和FaaS(功能即服务). 很多人认为Ia ...
- MQ系列9：高可用架构分析
MQ系列1:消息中间件执行原理 MQ系列2:消息中间件的技术选型 MQ系列3:RocketMQ 架构分析 MQ系列4:NameServer 原理解析 MQ系列5:RocketMQ消息的发送模式 MQ系 ...
- .NET 6配置EF Core数据库链接字符串
appsetting.json { "Logging": { "LogLevel": { "Default": "Informat ...
- cmd无限弹窗
记一次写 .bat 文件时犯的低级错误,搞的重启了好几次才发现问题所在 如下 文件名 和 批处理 内容 会造成 无限弹出cmd窗口 原因是一般情况下会启动系统的 cmd.exe,而此处用的简写,在执行 ...
- 手把手教你图文并茂windows10安装VMware创建CentOS-7-x86_64运行linux系统
VMware是什么 VMWare (Virtual Machine ware)可以使你的计算机上同时运行几个系统.例如windows.DOS.LINUX等同时存在,可以将这些系统像程序似的随时切换,并 ...
- Qt添加自定义控件
由于在自带的控件中没有发现滚动选择时间的控件,所以参考网上别人写的控件做了一点修改. 先看效果: 上代码: TimeScroll.h QT_BEGIN_NAMESPACE namespace Ui { ...
- Loadrunner的函数收集
1.int web_url( const char *StepName, const char *url, <List of Attributes>, [EXTRARES, <Lis ...
- 吾剑未尝不利,国内Azure平替,科大讯飞人工智能免费AI语音合成(TTS)服务Python3.10接入
微软Azure平台的语音合成(TTS)技术确实神乎其技,这一点在之前的一篇:含辞未吐,声若幽兰,史上最强免费人工智能AI语音合成TTS服务微软Azure(Python3.10接入),已经做过详细介绍, ...
- ReentrantLock介绍及源码解析
ReentrantLock介绍及源码解析 一.ReentrantLock介绍 ReentrantLock是JUC包下的一个并发工具类,可以通过他显示的加锁(lock)和释放锁(unlock)来实现线程 ...