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这样一个属性,顾名思义就是级联,也就是说在操作当 前实体时,针对当前实体的操作会影响到相应配置的关联实体.比如针对当前实体进行保存操作 ...
随机推荐
- Crane如何做到利用率提升3倍稳定性还不受损？
作为云平台用户,我们都希望购买的服务器物尽其用,能够达到最大利用率.然而要达到理论上的节点负载目标是很的,计算节点总是存在一些装箱碎片和低负载导致的闲置资源.下图展示了某个生产系统的CPU资源现状,从 ...
- 【leetcode】剑指offer04二维数组查找
很巧妙地把矩阵转化为二叉搜索树(不过好像没什用) class Solution { public: bool findNumberIn2DArray(vector<vector<int&g ...
- 使用 SmartIDE 开发golang项目
目录 概述 架构 开发视图 快速开始 安装 SmartIDE CLI 环境 启动 创建环境 安装工具 调试 基本调试 Start 命令调试 很荣幸在去年加入到 SmartIDE 产品组,从事开发工作, ...
- python Flask 操作数据库(2)
单表操作 数据准备 from flask import Flask from flask_sqlalchemy import SQLAlchemy class Config: DEBUG = True ...
- 学会了selenium 模拟鼠标操作，你就可以偷懒点点点了
前言 我们在做 Web 自动化的时候,有时候页面的元素不需要我们点击,值需要把鼠标移动上去就能展示各种信息. 这个时候我们可以通过操作鼠标来实现,接下来我们来讲一下使用 selenium 做 Web ...
- [R语言] 基于R语言实现树形图的绘制
树状图(或树形图)是一种网络结构.它由一个根节点组成,根节点产生由边或分支连接的多个节点.层次结构的最后一个节点称为叶.本文主要基于R语言实现树形图的绘制.关于python实现树形图的绘制见:基于ma ...
- [图像处理] YUV图像处理入门5
12 yuv420转换为rgb(opencv mat) yuv格式具有亮度信息和色彩信息分离的特点,但大多数图像处理操作都是基于RGB格式,而且自己造轮子工作量太大.因此通常都会将yuv转换为rgb, ...
- AspNetCore底层源码剖析（三）IOC
title: AspNetCore底层源码剖析(三)IOC date: 2022-09-21 13:20:01 categories: 后端 tags: - .NET 介绍 每个 ASP.NET Co ...
- TCP\ip 地址总结
127.0.0.1 本地回环地址,一般用于测试网卡是否正常工作 192.168.1.0 代表网络地址一个网络段 192.168.1.1-254 可用网络地址 192.168.1.255 广播地址!
- Atcoder dp I Coins 题解
Atcoder链接:Coins Luogu链接:Coins $\scr{\color{BlueViolet}{Solution}}$ 观察数据,发现$ \cal{n} \le 3000 $,说明 $ ...