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

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

学习内容：

一、业务需求

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

二、实现效果

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><scriptsrc="/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> 省份:<selectid="p"><optionvalue="-1">请选择</option><!-- 遍历后台传过来的省份集合 --><c:forEachitems="${allProvince}"var="province"><optionvalue="${province.id}">${province.name}</option></c:forEach></select> 城市:<selectid="c"><optionvalue="-1">请选择</option></select></body></html>

2. TwoController

后台处理方法

packagecom.yy.homework.web.controller;importcom.yy.homework.domain.City;importcom.yy.homework.domain.Province;importorg.springframework.stereotype.Controller;importorg.springframework.ui.Model;importorg.springframework.web.bind.annotation.RequestMapping;importorg.springframework.web.bind.annotation.ResponseBody;importjava.util.List;@ControllerpublicclassTwoController{// 获取省份 JSON 数据@RequestMapping("/provinces")publicStringgetProvinces(Model model){List<Province> allProvince=Province.getAllProvince();         model.addAttribute("allProvince", allProvince);return"forward:/province_city.jsp";}// 获取对应省份的城市 JSON 数据@RequestMapping("/cities")@ResponseBodypublicList<City>getCities(Long pid){returnCity.getCityByProvinceId(pid);}}

2. Province

为了让代码少一点，看的更清晰些，我伪造了一些省份数据，真实数据应该是你自己从数据库中查询出来的，封装成集合的形式给 Controller 调用

packagecom.yy.homework.domain;importjava.util.ArrayList;importjava.util.List;publicclassProvince{privateLong id;privateString name;publicProvince(){}publicProvince(Long id,String name){this.id= id;this.name= name;}publicLonggetId(){return id;}publicStringgetName(){return name;}// 获取所有的省份publicstaticList<Province>getAllProvince(){List<Province> provinces=newArrayList<Province>();         provinces.add(newProvince(1L,"湖南"));         provinces.add(newProvince(2L,"广东"));         provinces.add(newProvince(3L,"湖北"));return provinces;}}

3. Province

这里是我伪造的一些城市数据，真实数据应该是你自己根据前台页面传过来的省份 id 从数据库中查询出来的，封装成集合的形式给 Controller 调用，返回前端界面

packagecom.yy.homework.domain;importjava.util.ArrayList;importjava.util.Arrays;importjava.util.List;/**  * @program: jQuery-test02  * @ClassName City  * @description:  * @author: YanYang  * @create: 2021-05-28 18:07  **/publicclassCity{privateLong id;privateString name;publicCity(){}publicCity(Long id,String name){this.id= id;this.name= name;}publicLonggetId(){return id;}publicStringgetName(){return name;}publicStringtoString(){return"City [id="+ id+", name="+ name+"]";}/**      * 根据省份 id 查询省份中的城市!      * @return      */publicstaticList<City>getCityByProvinceId(Long pid){List<City> citys=newArrayList<City>();if(pid==1){             citys=Arrays.asList(newCity(11L,"长沙市"),newCity(12L,"株洲市"),newCity(13L,"湘潭市"),newCity(14L,"衡阳市"),newCity(15L,"邵阳市"),newCity(16L,"岳阳市"),newCity(17L,"常德市"),newCity(18L,"张家界市"));}elseif(pid==2){             citys=Arrays.asList(newCity(21L,"广州市"),newCity(22L,"深圳市"),newCity(23L,"佛山市"),newCity(24L,"中山市"),newCity(25L,"珠海市"),newCity(26L,"汕头市"),newCity(27L,"潮州市"),newCity(28L,"东莞市"));}elseif(pid==3){             citys=Arrays.asList(newCity(31L,"孝感市"),newCity(32L,"黄冈市"),newCity(33L,"咸宁市"),newCity(34L,"恩施州"),newCity(35L,"鄂州市"),newCity(36L,"武汉市"),newCity(37L,"荆门市"),newCity(38L,"襄阳市"));}return citys;}}

总结：

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

上一个：宠物领养网站app名字大全图片（宠物领养网站html模板）

下一个：动物疫苗采购信息简报内容（动物疫苗采购信息简报内容有哪些）

热门文章

归纳