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这样一个属性,顾名思义就是级联,也就是说在操作当 前实体时,针对当前实体的操作会影响到相应配置的关联实体.比如针对当前实体进行保存操作 ...
随机推荐
- js四舍五入保留两位小数的方法
四舍五入方法: 1,toFixed(): 此方法只包含小数位数的数字,适合处理金钱 2,toPrecision() :此方法包含所有数字, 不需要四舍五入 1,Math.floor()
- js修改数组中的属性名
将数组 [{id:"1",name:"AAA"}] 修改为 ===> [{id:"1",text:"AAA",va ...
- vue 组件之间传值（父传子，子传父）
1.父传子 基本就用一个方式,props Father.vue(用v-bind(简写 : ) 将父组件传的值绑定到子组件上) <template> <div> 我是爸爸:{{ ...
- vulnhub靶场之GROTESQUE: 3.0.1
准备: 攻击机:虚拟机kali.本机win10. 靶机:Grotesque: 3.0.1,下载地址:https://download.vulnhub.com/grotesque/grotesque3. ...
- Spring Boot 3.0横空出世，快来看看是不是该升级了
目录 简介 对JAVA17和JAVA19的支持 record Text Blocks Switch Expressions instanceof模式匹配 Sealed Classes and Inte ...
- pycharm下载 安装使用
pycharm下载与使用 1.下载 该软件分免费版和收费版 免费版(community):功能少 收费版(professional):30天试用 我们尽量使用收费版本 官网地址:h ...
- antDesign 【NG-ZORRO、Angular】日期选择框时间段nz-range-picker设置默认选择日期及限制日期可选范围
下面的代码包含 1.只可以选择今天以后 2.只可以选择今天开始一周内 3.只能选择今天之前的 import { Component } from '@angular/core'; import dif ...
- 华为云服务器8000通道映射到本地，本地浏览器访问jupyter
首先你得有个华为云服务器(这不是废话) 第二你得开放它的端口(重点) 第三打开本地cmd 输入ssh -L [客户端IP或省略]:[客户端端口]:[服务器IP]:[服务器端口] [登陆服务器的用户名] ...
- Unity打包资源，进行后台加载
Unity打包资源,进行后台加载 需要项目优化的pa you,这边走:Unity项目优化--Web版 一.前言 因为在下载Three.js,所以趁着这个时间写一下资源打包加载吧 小黑在刚开始学习Uni ...
- JSP第八次作业
数据库test 中建个表 stu(stuid 主键 自动增长 ,用户名,密码,年龄) 1.设计一个注册页面,实现用户注册功能2.设计一个登陆页面,实现用户名密码登陆3.两个页面可以互相超链接 1 pa ...