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

最新推荐文章于 2021-09-06 13:29:47 发布

Yan Yang

最新推荐文章于 2021-09-06 13:29:47 发布

阅读量2k

点赞数

分类专栏： JavaEE 文章标签： java js

本文链接：https://blog.youkuaiyun.com/zzvar/article/details/117811693

版权

本文介绍了如何使用Mybatis和JavaScript实现二级联动的下拉列表，涉及前端界面province_city.jsp的设计，后台TwoController的处理方法，以及Province实体类的数据模拟。通过这种方式，实现了省份和城市的选择联动效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

最低0.47元/天解锁文章