java编程
搜索
分类

Mybatis + js 实现下拉列表二级联动效果

作者：Yan Yang 时间：2022-09-14 03:43:06　

 一、业务需求

实现省份与城市的二级联动

二、实现效果

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;
   }
}

总结：

来源：https://blog.csdn.net/zzvar/article/details/117811693

标签：Mybatis,下拉列表,二级联动
0
投稿

猜你喜欢

  • C#图像边缘检测（Roberts）的方法

    2022-12-26 15:11:18

  • Android Studio实现简单计算器功能

    2023-10-17 03:54:42

  • SpringMVC实现注解式权限验证的实例

    2021-11-19 11:52:44

  • Android ListView和Adapter数据适配器的简单介绍

    2023-04-16 04:07:12

  • IntelliJ IDEA 15款超级牛逼插件推荐（自用，超级牛逼）

    2023-10-10 05:51:22

  • C#中应用程序集的装载过程详解

    2023-03-30 19:06:05

  • C#常用目录文件操作类实例

    2023-06-24 13:30:24

  • SpringBoot整合支付宝APP支付

    2021-10-12 02:57:24

  • Android 使用AlarmManager和NotificationManager来实现闹钟和通知栏

    2023-03-26 05:12:35

  • c++异常处理机制示例及详细讲解

    2022-04-27 11:31:27

  • springboot 如何取消starter的自动注入

    2023-02-06 21:31:05

  • Android ActionBar搜索功能用法详解

    2023-01-24 21:15:02

  • 详解Spring Boot最核心的27个注解，你了解多少？

    2023-11-20 06:23:35

  • c#中@的3种作用

    2022-03-23 17:18:07

  • Unity中的PostProcessBuild实用案例深入解析

    2021-06-08 13:48:51

  • Java中获取泛型类型信息的方法

    2022-06-30 16:06:34

  • Java设计模式之接口隔离原则精解

    2022-05-05 16:42:05

  • 详解java中的Collections类

    2022-02-14 16:30:00

  • Android平台基于Pull方式对XML文件解析与写入方法详解

    2021-07-21 01:52:52

  • Android Studio实现带三角函数对数运算功能的高级计算器

    2022-08-21 05:02:47
    • asp之家 软件编程 m.aspxhome.com