代码编织梦想

 进入页面什么都不选择的情况

选择第一级省份,城市下拉框自动匹配对应省份 

选择第二级城市 ,区县下拉框自动匹配对应城市

怎么实现呢,接下来看下代码

        所属省份:
    <select id="pCode" onchange="two()">
        <option selected disabled>请选择</option>
        <option th:each="province:${provinceList}" th:value="${province.code}" th:text="${province.name}">
        </option>
    </select>
        所属城市:
    <select id="cCode" onchange="three()">
        <option selected disabled>请选择</option>
    </select>
        所属区县:
    <select id="tCode">
        <option selected disabled>请选择</option>
    </select>

 html页面创建下拉框

省份不需要条件,下拉框直接查询全部

    @RequestMapping("/threeLevelLinkers")
    public String getAllCity(Model model){
        //查询所有省份
        List<Province> provinceList = provinceService.list();
        model.addAttribute("provinceList",provinceList);
        return "list";
    }
}

返回html页面, ,用thymeleaf获取值

第二个下拉框查询我们设立一个点击事件,点击时调用函数进入ajax

   function two() {
       //获取城市编码
       var pcode = $("#pCode option:selected").val();
       $.ajax({
               //url
               url:'/citys/two/'+pcode,
               //参数
               // data:{},
               //请求类型
               type:'get',
               //响应体结果格式
               dataType:'json',
               //成功回调
               success:function (data){
                   //清空节点
                   $('#cCode').empty();
                   $("#tCode").empty()
                   $("#cCode").append("<option>请选择</option>")
                   // $('#cCode').append("<option th:value='0'>请选择</option>>")
                   for (let i = 0; i <data.length ; i++) {
                       console.log(data[i].name)
                       $('#cCode').append("<option value='"+data[i].code+"'>"+data[i].name+"</option>>")
                   }
               },
               error:function (){
                   console.log('出错啦!')
               }
           }
       )
   }

然后根据ajax路径带参数省份编码跳转到controller

@Controller
@RequestMapping("/citys")
public class CityController {

    @Autowired
    private CityService cityService;

    @ResponseBody
    @RequestMapping("/two/{code}")
    public List<City> two( @PathVariable("code")String code){
        LambdaUpdateWrapper<City> wrapper=new LambdaUpdateWrapper<>();
        wrapper.eq(City::getProvincecode,code);
        List<City> cityByProvinceCode = cityService.list(wrapper);
        return cityByProvinceCode;
    }
}

 这里用mp查询,根据省份编码查询城市,@ResponseBody把对象返回

每次点击清空上一次查询结果

 $('#cCode').empty();
                   $("#tCode").empty()

成功返回里面调用函数,遍历新增节点,把名字放在节点里

  for (let i = 0; i <data.length ; i++) {
                       console.log(data[i].name)
                       $('#cCode').append("<option value='"+data[i].code+"'>"+data[i].name+"</option>>")
                   }

 第三级查询也一样,第三个下拉框查询我们设立一个点击事件,点击时调用函数进入ajax

 ​​​​ 

   function three() {
       var cCode=$("#cCode option:selected").val()
    $.ajax({
        url: '/towns/three/'+cCode,
        dataType: 'json',
        type: 'get',
        success:function (data) {
            $("#tCode").empty()
            $("#tCode").append("<option>请选择</option>")
            for (let i = 0; i <data.length ; i++) {
                $("#tCode").append("<option >"+data[i].name+"</option>")
            }
        }
    })
   }

 然后根据ajax路径带参数省份编码跳转到controller

@Controller
@RequestMapping("/towns")
public class TownController {

    @Autowired
    private TownService townService;

    @ResponseBody
    @RequestMapping("/three/{code}")
    public List<Town> three(@PathVariable("code")String code){
        LambdaUpdateWrapper<Town> wrapper=new LambdaUpdateWrapper<>();
        wrapper.eq(Town::getCitycode,code);
         List<Town> cityByCityCode = townService.list(wrapper);
            return cityByCityCode;
    }
}

 

 这里用mp查询,根据城市编码查询区县,@ResponseBody把对象返回

每次点击清空上一次查询结果

$("#tCode").empty()

 成功返回里面调用函数,遍历新增节点,把名字放在节点里

 for (let i = 0; i <data.length ; i++) {
                $("#tCode").append("<option >"+data[i].name+"</option>")
            }

 

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/xcj2437/article/details/127997885

基于ssm框架实现省市区3级联查_乔你那熊色的博客-爱代码爱编程

          下面我们就以代码的形式来说一下这个省市区3级联查是如何实现的。 一.Spring的核心配置文件            我们知道Spring的核心配置文件applicationContext通常放在src目录下,下面就是applicationContext.xml。 <?xml version="1.0" encoding="

intellij idea搭建ssm框架_实现省市县三级联动_baomg_8774的博客-爱代码爱编程

1 创建Maven项目 1.1 创建项目前准备_通用配置 配置Maven 配置项目构建插件 -DarchetypeCatalog=internal 1.2 创建项目 1.3 配置Tomcat服务

Vue+elementUI实现省市区三级联动select-爱代码爱编程

今天实现了省市区三级联动select,网上有很多乱糟糟的教程,其实很简单,这里做一下简单记录 使用elementUI数据 1、获取elementUI的省市区级联数据 npm install element-china-area-data -S 2、引入数据 import { regionData } from 'element-china-are

mysql jsp省市区三级联动_用jsp实现省市区三级联动下拉-爱代码爱编程

不少系统都需要实现省市区三级联动下拉,像人口信息管理、电子商务网站、会员管理等,都需要填写地址相关信息。而用ajax实现的无刷新省市区三级联动下拉则可以改善用户体验,目前基本上所有网站都是采用这一种方式。现在ajax的使用已经不像最初那样使用最原始的方法了,因为有很多的js框架供我们选择,我们只需要调用它们的一个方法就可以实现ajax功能,而其他的则交

mysql 省市县三级联动查询_省市县三级联动的SQL语句-爱代码爱编程

省市县三级联动的SQL语句 无 CREATE TABLE `t_address_province` (`id` INT AUTO_INCREMENT PRIMARY KEY COMMENT '主键',`code` CHAR(6) NOT NULL COMMENT '省份编码',`name` VARCHAR(40) NOT NULL COMMENT '省

Springboot项目 Mysql数据库 简单三表联查-爱代码爱编程

需求是要查询课程表、班级表、教师表,查询出所有课程名称以及教师名称(课程表中存放的是班级id和教师id) 主要运用的是两个左连接         select lesson.*,info_class.name AS className,sys_user.realname AS teacherName from lesson LEFT JOIN

Elementui实现省市县三级联动-爱代码爱编程

Elementui实现省市县三级联动 1,vue下安装 npm install element-china-area-data -S 2,import { provinceAndCityData, regionData, provinceAndCityDataPlus, regionDataPlus, CodeToText, TextToCode } f

Ajax的使用,实现省市区三级联动-爱代码爱编程

•举个例子:普通B/S模式(同步)       AJAX技术(异步) 同步:提交请求->等待服务器处理->处理完毕返回 这个期间客户端浏览器不能干任何事 异步: 请求通过事件触发->服务器处理(这时浏览器仍然可以作其他事情)->处理完毕 同步是指:发送方发出数据后,等接收方发回响应以后才发下一个数据包的通讯方式。   异

springboot集成mybatis实现省市县三级联查-爱代码爱编程

XML文件 <resultMap id="ssx" type="CityEntity"> <result property="RegionName" column="aRegionName