Mybatis + js 实现下拉列表二级联动效果
作者:Yan Yang 发布时间:2022-09-14 03:43:06
标签:Mybatis,下拉列表,二级联动
一、业务需求
实现省份与城市的二级联动
二、实现效果
三、代码实现
1. province_city.jsp
前端界面实现
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
<title>二级联动</title>
<script src="/static/jQuery-1.11/jquery-1.11.3.min.js"></script>
<script>
// 页面加载完毕执行
$(function () {
let $p = $('#p');
let $c = $('#c');
// 给省份下拉框绑定值改变事件处理函数,当省份下拉框选项改变了,就发送请求获取这个省份对应
// 城市数据,拿到数据再使用 DOM 显示在城市下拉框中
$p.change(function () {
// 获取被选中省份下拉框的 option 的 value 属性值,即省份 id 值
let pid = $(this).val();
// 清除旧有子元素(每次改变省份需要清除城市元素,否则城市元素会一直添加)
$c.empty();
// 请选择也被清除了,所以需要添加回来
$c.append('<option value="-1">请选择</option>');
// 判断是否选中了省份
if (pid >= 1) {
$.post('/cities', 'pid=' + pid, function (data) {
// 遍历城市数组
data.forEach(function (value) {
console.log(value);
// 添加下拉元素
$c.append('<option value="' + value.id +'">' + value.name +'</option>');
});
});
}
});
});
</script>
</head>
<body>
省份:<select id="p">
<option value="-1">请选择</option>
<!-- 遍历后台传过来的省份集合 -->
<c:forEach items="${allProvince}" var="province">
<option value="${province.id}">${province.name}</option>
</c:forEach>
</select>
城市:<select id="c">
<option value="-1">请选择</option>
</select>
</body>
</html>
2. TwoController
后台处理方法
package com.yy.homework.web.controller;
import com.yy.homework.domain.City;
import com.yy.homework.domain.Province;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import java.util.List;
@Controller
public class TwoController {
// 获取省份 JSON 数据
@RequestMapping("/provinces")
public String getProvinces(Model model) {
List<Province> allProvince = Province.getAllProvince();
model.addAttribute("allProvince", allProvince);
return "forward:/province_city.jsp";
}
// 获取对应省份的城市 JSON 数据
@RequestMapping("/cities")
@ResponseBody
public List<City> getCities(Long pid) {
return City.getCityByProvinceId(pid);
}
}
2. Province
为了让代码少一点,看的更清晰些,我伪造了一些省份数据,真实数据应该是你自己从数据库中查询出来的,封装成集合的形式给 Controller 调用
package com.yy.homework.domain;
import java.util.ArrayList;
import java.util.List;
public class Province {
private Long id;
private String name;
public Province() {
}
public Province(Long id, String name) {
this.id = id;
this.name = name;
}
public Long getId() {
return id;
}
public String getName() {
return name;
}
// 获取所有的省份
public static List<Province> getAllProvince() {
List<Province> provinces = new ArrayList<Province>();
provinces.add(new Province(1L, "湖南"));
provinces.add(new Province(2L, "广东"));
provinces.add(new Province(3L, "湖北"));
return provinces;
}
}
3. Province
这里是我伪造的一些城市数据,真实数据应该是你自己根据前台页面传过来的 省份 id 从数据库中查询出来的,封装成集合的形式给 Controller 调用,返回前端界面
package com.yy.homework.domain;
import java.util.ArrayList;
import java.util.Arrays;
import java.util.List;
/**
* @program: jQuery-test02
* @ClassName City
* @description:
* @author: YanYang
* @create: 2021-05-28 18:07
**/
public class City {
private Long id;
private String name;
public City() {
}
public City(Long id, String name) {
this.id = id;
this.name = name;
}
public Long getId() {
return id;
}
public String getName() {
return name;
}
public String toString() {
return "City [id=" + id + ", name=" + name + "]";
}
/**
* 根据省份 id 查询省份中的城市!
* @return
*/
public static List<City> getCityByProvinceId(Long pid) {
List<City> citys = new ArrayList<City>();
if (pid == 1) {
citys = Arrays.asList(
new City(11L, "长沙市"),
new City(12L, "株洲市"),
new City(13L, "湘潭市"),
new City(14L, "衡阳市"),
new City(15L, "邵阳市"),
new City(16L, "岳阳市"),
new City(17L, "常德市"),
new City(18L, "张家界市")
);
} else if (pid == 2) {
citys = Arrays.asList(
new City(21L, "广州市"),
new City(22L, "深圳市"),
new City(23L, "佛山市"),
new City(24L, "中山市"),
new City(25L, "珠海市"),
new City(26L, "汕头市"),
new City(27L, "潮州市"),
new City(28L, "东莞市")
);
} else if (pid == 3) {
citys = Arrays.asList(
new City(31L, "孝感市"),
new City(32L, "黄冈市"),
new City(33L, "咸宁市"),
new City(34L, "恩施州"),
new City(35L, "鄂州市"),
new City(36L, "武汉市"),
new City(37L, "荆门市"),
new City(38L, "襄阳市")
);
}
return citys;
}
}
总结:
来源:https://blog.csdn.net/zzvar/article/details/117811693
0
投稿
猜你喜欢
- springcloud-gateway集成knife4j环境信息环境信息spring-boot:2.6.3spring-cloud-alib
- 规则1(无继承情况下):对于静态变量、静态初始化块、变量、初始化块、构造器,它们的初始化顺序依次是(静态变量、静态初始化块)>(变量、
- 前言这篇博客介绍Java环境的配置,主要是安装JDK,以及path、JAVA_hOME、CLASSPAT的配置,还会介绍配置这些的原因。一.
- 这篇文章主要介绍了Spring @Transactional注解失效解决方案,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的
- package com.abc.dao;import java.sql.Connection;import java.sql.DriverM
- 引言:关于java IO流的操作是非常常见的,基本上每个项目都会用到,每次遇到都是去网上找一找就行了,屡试不爽。上次突然一个同事问了我jav
- Elastic Search是一个开源的,分布式,实时搜索和分析引擎。Spring Boot为Elasticsearch及Spring Da
- 背景数据之间两两趋势比较在数据分析应用中是非常常见的应用场景,如下所示:模拟考批次班级学生语文数学英语202302三年一班张小明130145
- spring boot是个好东西,可以不用容器直接在main方法中启动,而且无需配置文件,方便快速搭建环境。可是当我们要同时启动2个spri
- 本文实例讲述了Android中断线程的处理方法。分享给大家供大家参考。具体方法如下:我现在对一个用户注册的功能1.用ProgressDial
- java.lang.ArrayStoreException 分析这个demo来说明怎样排查一个spring boot 1应用升级到sprin
- 每当想找哪个运算符优先级高时,很多时候总是想找的就没有,真让人气愤!现在,终于有个我个人觉得非常全的,分享给大家,欢迎拍砖!C语言运算符优先
- 本文实例讲述了基于WebClient实现Http协议的Post与Get对网站进行模拟登陆和浏览的方法。分享给大家供大家参考。具体分析如下:一
- 本文实例为大家分享了Java实现FTP上传与下载的具体代码,供大家参考,具体内容如下JAVA操作FTP服务器,只需要创建一个FTPClien
- 可以静态绑定数据源,这样就自动为DataGridView控件添加 相应的行。假如需要动态为DataGridView控件添加新行,方法有很多种
- 实例如下:package com.bwsk.modules.weixin.util;import java.util.Random;/**
- 本文实例讲述了C#编程实现四舍五入、向上及下取整的方法。分享给大家供大家参考,具体如下:在处理一些数据时,我们希望能用“四舍五入”法实现,但
- 一、题目描述题目:同步锁出现的目的就是为了解决多线程安全问题。同步锁的几种方式synchronized1、同步代码块2、同步方法jdk1.5
- 1.封装什么是封装,谈谈自己对封装的理解,封装就是将类的信息(比如说类的属性)隐藏在类的内部,不允许外部程序直接访问。此时就要提到一个关键字
- 1、try with catch还记得这样的代码吗?我们需要手动的关闭资源的流,不然会造成资源泄漏,因为虚拟机无法管理系统资源的关闭,必须手