Mybatis + js 實(shí)現(xiàn)下拉列表二級(jí)聯(lián)動(dòng)效果

更新時(shí)間：2021年06月11日 14:20:04 作者：Yan Yang

這篇文章給大家介紹基于Mybatis + js 實(shí)現(xiàn)下拉列表二級(jí)聯(lián)動(dòng)效果，實(shí)現(xiàn)代碼分為前端界面實(shí)現(xiàn)和后端處理方法，代碼簡(jiǎn)單易懂，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友參考下吧

一、業(yè)務(wù)需求

實(shí)現(xiàn)省份與城市的二級(jí)聯(lián)動(dòng)

二、實(shí)現(xiàn)效果

在這里插入圖片描述

三、代碼實(shí)現(xiàn)

1. province_city.jsp

前端界面實(shí)現(xiàn)

<%@ 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>二級(jí)聯(lián)動(dòng)</title>
    <script src="/static/jQuery-1.11/jquery-1.11.3.min.js"></script>
    <script>
        // 頁(yè)面加載完畢執(zhí)行
        $(function () {
            let $p = $('#p');
            let $c = $('#c');
            // 給省份下拉框綁定值改變事件處理函數(shù)，當(dāng)省份下拉框選項(xiàng)改變了，就發(fā)送請(qǐng)求獲取這個(gè)省份對(duì)應(yīng)
            // 城市數(shù)據(jù)，拿到數(shù)據(jù)再使用 DOM 顯示在城市下拉框中
            $p.change(function () {
                // 獲取被選中省份下拉框的 option 的 value 屬性值，即省份 id 值
                let pid = $(this).val();

                // 清除舊有子元素（每次改變省份需要清除城市元素，否則城市元素會(huì)一直添加）
                $c.empty();
                // 請(qǐng)選擇也被清除了，所以需要添加回來(lái)
                $c.append('<option value="-1">請(qǐng)選擇</option>');
                // 判斷是否選中了省份
                if (pid >= 1) {
                    $.post('/cities', 'pid=' + pid, function (data) {
                        // 遍歷城市數(shù)組
                        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">請(qǐng)選擇</option>
    <!-- 遍歷后臺(tái)傳過(guò)來(lái)的省份集合 -->
    <c:forEach items="${allProvince}" var="province">
        <option value="${province.id}">${province.name}</option>
    </c:forEach>
</select>
城市:<select id="c">
    <option value="-1">請(qǐng)選擇</option>
</select>
</body>
</html>

2. TwoController

后臺(tái)處理方法

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 數(shù)據(jù)
    @RequestMapping("/provinces")
    public String getProvinces(Model model) {
        List<Province> allProvince = Province.getAllProvince();
        model.addAttribute("allProvince", allProvince);
        return "forward:/province_city.jsp";
    }

    // 獲取對(duì)應(yīng)省份的城市 JSON 數(shù)據(jù)
    @RequestMapping("/cities")
    @ResponseBody
    public List<City> getCities(Long pid) {
        return City.getCityByProvinceId(pid);
    }
}

2. Province

為了讓代碼少一點(diǎn)，看的更清晰些，我偽造了一些省份數(shù)據(jù)，真實(shí)數(shù)據(jù)應(yīng)該是你自己從數(shù)據(jù)庫(kù)中查詢出來(lái)的，封裝成集合的形式給 Controller 調(diào)用

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

這里是我偽造的一些城市數(shù)據(jù)，真實(shí)數(shù)據(jù)應(yīng)該是你自己根據(jù)前臺(tái)頁(yè)面?zhèn)鬟^(guò)來(lái)的 省份 id 從數(shù)據(jù)庫(kù)中查詢出來(lái)的，封裝成集合的形式給 Controller 調(diào)用，返回前端界面

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 + "]";
    }
    /**
     * 根據(jù)省份 id 查詢省份中的城市!
     * @return
     */
    public static List<City> getCityByProvinceId(Long pid) {
        List<City> citys = new ArrayList<City>();
        if (pid == 1) {
            citys = Arrays.asList(
                    new City(11L, "長(zhǎng)沙市"),
                    new City(12L, "株洲市"),
                    new City(13L, "湘潭市"),
                    new City(14L, "衡陽(yáng)市"),
                    new City(15L, "邵陽(yáng)市"),
                    new City(16L, "岳陽(yáng)市"),
                    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, "襄陽(yáng)市")
            );
        }
        return citys;
    }
}