Mybatis + js 实现下拉列表二级联动
Mybatis + js 实现下拉列表二级联动
学习内容：
一、业务需求
实现省份与城市的二级联动
二、实现效果
三、代码实现
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;
}
}
总结：
以上就是用二级联动的代码了，代码仅供参考，欢迎讨论交流。
Mybatis + js 实现下拉列表二级联动的更多相关文章
- jQuery下拉列表二级联动插件
jQuery下拉列表二级联动插件的视图代码: <!doctype html> <html lang="en"> <head> <meta ...
- Select标签下拉列表二级联动级联
首先从服务器端,绑定下拉列表,二级下拉的text命名按照一定规则加上一级下拉的ID. var options=new Array(); $(document).ready(function(){ // ...
- xml+js+html的二级联动
首先需要准备的文档是: cities.xml //主要是标注中国各省及其各省下的各个城市 内容如下: <?xml version="1.0" encoding="U ...
- js实现城市二级联动列表
这个是一个同事写的,我看着有用,就cv下来了. 程序功能主要逻辑是: 1.当一级标签市显示默认状态 '-请选择-'时,二级标签要隐藏 2.一级标签选中城市时,二级标签显示在页面,并列出响应市区 3.当 ...
- js实现菜单二级联动
代码如下,以便自己以后方便查阅: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> < ...
- 原生JS的地区二级联动，很好理解的逻辑
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 用JS实现省市二级联动
一.需求分析 我们希望在注册页面中添加一个字段(籍贯),当用户选择一个具体的省份,在后面的下拉列表中动态加载该省份下所有的城市.显示的效果如下: 二.技术分析 使用事件(onchange) 使用一个二 ...
- JavaScript学习——使用JS完成省市二级联动
1.我们希望在注册页面中添加一个字段(籍贯),当用户选择一个具体的省份,在后面的下拉列表中动态加载该省份下所有的城市.显示的效果如下: 2.步骤分析: 第一步:确定事件(onchange)并为其绑定一 ...
- 用原生JS写省市二级联动
HTML代码 <select id="s1"> <option value="0">~请选择省份~</option> < ...
随机推荐
- kubernetes关于证书配置得问题总结
总结证书配置 1.证书首先分为两种配置方式, 1) 一种是在集群中配置 2) 一种是在上游负载均衡中配置. 1)https证书在集群中配置,并域名直接解析到集群的ingress-nginx-contr ...
- Oracle视图（view）传参数教程
废话不多说,直接上例子! 创建包: create or replace package p_view_param is function set_param(num number) return nu ...
- pygame坦克大战前夕
最近想自己写pygame版的坦克大战,今晚已经完成如下功能: 1,我方坦克,可手动移动:敌方坦克,自动转方向与移动 2,坦克颜色随机,坦克形态大小可调. 3,双方坦克速度可调. 4,刷新坦克的位置随机 ...
- Flask 之 宏
宏 对宏(macro)的理解: 把它看作 Jinja2 中的一个函数,它会返回一个模板或者 HTML 字符串 为了避免反复地编写同样的模板代码,出现代码冗余,可以把他们写成函数以进行重用 需要在多处重 ...
- WebGPU 计算管线、计算着色器（通用计算）入门案例：2D 物理模拟
目录 1. WebGL 2. WebGPU 2.1. 适配器(Adapter)和设备(Device) 2.2. 着色器(Shaders) 2.3. 管线(Pipeline) 2.4. 并行(Paral ...
- S2-045（RCE远程代码执行）
环境搭建: https://blog.csdn.net/qq_36374896/article/details/84145020 漏洞复现 进入漏洞环境 (048和045一样) cd vulhub-m ...
- K-good number Theory + 数学问题
这道题是我做CodeTon Round1时的D题,总的来看思路很重要,有几个比较明显的切入问题的角度,要选择到最优的那个: 先看题目: 我们可以发现,这道题的描述一目了然,就是说我们能不能找k个数的和 ...
- Flutter入门教程（一）Flutter简介
这是Flutter系列第一篇文章,后续会持续更新Flutter相关知识,本篇就主要对于Flutter技术做一个简单的入门介绍 一.Flutter简介 Flutter是谷歌的移动UI框架,可以快速在iO ...
- Java常见的垃圾收集器有哪些？
守拙者_6a98关注 2020.04.11 22:06:31字数 2,135阅读 394 实际上,垃圾收集器( GC , Garbage Collector )是和具体 JVM 实现紧密相关的,不同厂 ...
- 七牛云简单实用-uploadManager.put(..)抛出异常
描述: 本人小白,最近在写一个仿头条的项目,其中有用到七牛云做为图片的存储以代替本地服务其存储,按照视频教程配置服务器端的简单上传功能,总是报错: 参照官方文档:https://developer.q ...