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;
}
}
总结：
以上就是用二级联动的代码了，代码仅供参考，欢迎讨论交流。
以上就是Mybatis + js 实现下拉列表二级联动的详细内容，更多关于Mybatis下拉列表二级联动的资料请关注我们其它相关文章！
相关推荐
-
详解jeefast和Mybatis实现二级联动的问题
在实现下拉框的基础上进行二级联动(这个项目有bug添加可以完成,但是修改获取不到对应的值,这个问题解决以后我会在发布一篇文章) JS部分 // 二级联动 @RequestMapping("/all/{gid}") @RequiresPermissions("platform:classes:all") public R list1(@PathVariable("gid") int gid){ Map<String,Object>map
-
Mybatis中实体类属性与数据列表间映射方法介绍
Mybatis不像Hibernate中那么自动化,通过@Column注解或者直接使用实体类的属性名作为数据列名,而是需要自己指定实体类属性和 数据表中列名之间的映射关系,这一点让用惯了Hibernate的人很不习惯,所幸经过探索找到了建立映射关系的三种办法,其中总也有比较 简单的. 首先先定义一个实体类,如下: public class User implements Serializable { private Integer userId; private String userName;
-
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/js
-
js实现的下拉框二级联动效果
本文实例讲述了js实现的下拉框二级联动效果.分享给大家供大家参考,具体如下: <script language="JavaScript" type="text/javascript"> <!-- /* * 说明:将指定下拉列表的选项值清空 * 转自:Gdong Elvis ( http://www.gdcool.net ) * * @param {String || Object]} selectObj 目标下拉选框的名称或对象,必须 */ fun
-
j2ee之AJAX二级联动效果
本文实例为大家分享了AJAX二级联动效果的具体代码,供大家参考,具体内容如下 Ajax.js var createAjax = function(){ var ajax = null; try{ ajax = new ActiveXObject("microsoft.xmlhttp"); }catch(e1){ try{ ajax = new XMLHttpRequest(); }catch(e2){ alert("请换掉你的浏览器"); } } return aj
-
用户管理的设计_jquery的ajax实现二级联动效果
页面效果 实现步骤 1.引入struts整合json的插件包 2.页面使用jquery的ajax调用二级联动的js //ajax的二级联动,使用选择的所属单位,查询该所属单位下对应的单位名称列表 function findJctUnit(o){ //货物所属单位的文本内容 var jct = $(o).find("option:selected").text(); $.post("elecUserAction_findJctUnit.do",{"jctID
-
select下拉菜单实现二级联动效果
需求:建立年级.班级两个数据表,获取年级表信息,根据年级,获取相应的班级 效果图: 不完美的地方就是在不选择年级的时候,是不能选择任何班级的. 代码部分 首先是建立两个表的实体 需要注意的就是写注解了.代码就不贴了. DAO层代码 年级DAO 年级的DAO层没什么代码,就是继承那三个类,具体用到哪个我也不清楚,就直接都继承了. public interface GraceDAO extends PagingAndSortingRepository<Grace, String>,JpaSpeci
-
asp.net DropDownList实现二级联动效果
最近在做新闻发布系统的时候,用到了二级联动,我把使用方法记录下来,以便日后查阅以及帮助新手朋友们.下面是效果图: 下面来讲解一下实现的方法: 1.在.aspx页面中,拖入两个DroDownList控件.代码如下: <tr> <td>新闻风格:</td> <td><asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="True&q
-
React实现二级联动效果（楼梯效果）
本文实例为大家分享了React实现二级联动效果的具体代码,供大家参考,具体内容如下 模仿饿了么实现一个二级联动的效果: import "../css/Leftrightlinkage.less"; import React, { Component } from "react"; export default class Leftrightlinkage extends Component { constructor(...args) { super(...args
-
React+ts实现二级联动效果
本文实例为大家分享了React+ts实现二级联动效果的具体代码,供大家参考,具体内容如下 .tsx文件 import { Component, createRef} from 'react' import './index.less' interface State { top: any ButtonList: Button[] ContentList: Content[] ButtonIndex: number } interface Button { id: string text: str
-
vue实现下拉框二级联动效果的实例代码
1.实现效果 2.后端返回的数据格式 "list": [ { "id": "1178214681118568449", "title": "后端开发", "children": [ { "id": "1178214681139539969", "title": "Java" }, { "id&quo
-
js实现select二级联动下拉菜单
本文实例为大家分享了js实现select二级联动下拉菜单,供大家参考,具体内容如下 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.