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这样一个属性,顾名思义就是级联,也就是说在操作当 前实体时,针对当前实体的操作会影响到相应配置的关联实体.比如针对当前实体进行保存操作 ...
随机推荐
- SpringBoot内置tomcat启动过程及原理
作者:李岩科 1 背景 SpringBoot 是一个框架,一种全新的编程规范,他的产生简化了框架的使用,同时也提供了很多便捷的功能,比如内置 tomcat 就是其中一项,他让我们省去了搭建 tomca ...
- jmeter Foreach 控制器与json提取器/正则表达式
适用场景:对某些业务数据依次操作 如:删除某个用户下的所有人员数据,无批量删除接口时,只能循环调用删除人员接口,直到删除完成 返回数据格式: 1. 使用json提取器或正则表达式提取业务数据(jso ...
- 编译安装nmon
nmon 是什么? nmon(Nigel's performance Monitor for Linux)是一种Linux性能监视工具,当前它支持 Power/x86/x86_64/Mainframe ...
- md5-有道翻译
网站 aHR0cHMlM0EvL2ZhbnlpLnlvdWRhby5jb20v 测试发现三个值是变化的 一.第一种方法 initiator一步一步找,在t.translate中找到以下内容 这里可以看 ...
- Python从入门到精通（第2版）——pyuic5: error: no such option: -m的问题解决
前言 在学习<Python从入门到精通(第2版)>的第15章 GUI界面编程--15.2.4 将.ui文件转换为.py文件时,按照书中步骤出错时的问题解决,希望对同样学习本书的同学有所帮助 ...
- 手把手教你玩转 Excel 数据透视表
1. 什么是数据透视表 数据透视表是一种可以快速汇总.分析大量数据表格的交互式分析工具.使用数据透视表可以按照数据表格的不同字段从多个角度进行透视,并建立交叉表格,用以查看数据表格不同层面的汇总信息 ...
- js任务队列EventLoop
JS 执行机制 在我们学js 的时候都知道js 是单线程的如果是多线程的话会引发一个问题在同一时间同时操作DOM 一个增加一个删除JS就不知道到底要干嘛了,所以这个语言是单线程的但是随着HTML5到来 ...
- 什么是RPC? （全面了解）
一:RPC 1.什么是RPC? RPC 是指远程过程调用,也就是说两台服务器,A 和 B,一个应用部署在A 服务器上,想要调用B 服务器上应用提供的函数或方法,由于不在一个内存空间,不能直接调用,需要 ...
- python之路55 cookie与session 操作 把模块变成字符串进行导入
django中间件三个了解的方法 1.process_view 路由匹配成功之后执行视图函数/类之前自动触发(顺序同process_request) 2.process_exception 视图函数/ ...
- [LeetCode]杨辉三角 II
题目 代码 class Solution { public: vector<int> getRow(int rowIndex) { vector<int> array(rowI ...