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" %>  二级联动 省份: 城市:

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 allProvince = Province.getAllProvince(); model.addAttribute("allProvince", allProvince); return "forward:/province_city.jsp"; } // 获取对应省份的城市 JSON 数据 @RequestMapping("/cities") @ResponseBody public List 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 getAllProvince() { List provinces = new ArrayList(); 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 getCityByProvinceId(Long pid) { List citys = new ArrayList(); 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; } }