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" %>


    
    
    


省份:
    请选择
    
    
        ${province.name}
    

城市:
    请选择

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

总结：

以上就是用二级联动的代码了，代码仅供参考，欢迎讨论交流。

以上就是Mybatis + js 实现下拉列表二级联动的详细内容，更多关于Mybatis下拉列表二级联动的资料请关注脚本之家其它相关文章！