java 城市三级联动,包括表的建设以及后台

首先看下效果图:


当点击北京的时候,自动加载第二级以及第三级的数据。(二、三级默认的第一项)。

表的搭建:


这里注意PARENT_ID跟AREA_ID的关系,即北京市下面有很多区县,那么PARENT_ID的父类对应的都是1,方便我们的SQL语句查询。LEV是等级,因为是三级联动,所以目前我们分为1(直辖市及省会城市及特别行政区),2(地级市),3(区、县)。


前台代码:()



jquery:

注意,我们这里返回的是一个List集合,因此我们要把他循环出来,取到他的areaId及areaName.取到的数据就是省以及直辖市的名称。(查询一级城市的时候,这个时候,我们就在xml文件的条件写where Lev=1,或者parent_id=0)如下图:



我们接着写第二级菜单的方法。(思路:当我们点击山西省时候,他会出现山西省的地级城市,因此,我们需要PARENT_ID作为参数,来传到后台作为查询语句),所以点击一级菜单的时候,调用getCity($(this).val())方法。



同样的,三级菜单跟二级菜单原理一样。



后台代码:()

XML文件:



我们的三级联动到这就完成了

  • 4
    点赞
  • 61
    收藏
    觉得还不错? 一键收藏
  • 8
    评论
Java地区三级联动一般可以通过前端框架或者插件来实现。以下是一种基于jQuery和Ajax的实现方式: 1. 在HTML中设置三个下拉框元素: ``` <select id="province"> <option value="">请选择省份</option> </select> <select id="city"> <option value="">请选择城市</option> </select> <select id="area"> <option value="">请选择地区</option> </select> ``` 2. 在JavaScript中使用jQuery和Ajax获取地区数据并渲染下拉框: ``` $(function(){ // 获取省份数据 $.ajax({ url: 'getProvinceData', type: 'GET', dataType: 'json', success: function(data){ var html = '<option value="">请选择省份</option>'; for(var i=0; i<data.length; i++){ html += '<option value="'+data[i].province_id+'">'+data[i].province_name+'</option>'; } $('#province').html(html); } }); // 根据省份获取城市数据 $('#province').on('change', function(){ var provinceId = $(this).val(); if(provinceId){ $.ajax({ url: 'getCityData', type: 'GET', data: {provinceId: provinceId}, dataType: 'json', success: function(data){ var html = '<option value="">请选择城市</option>'; for(var i=0; i<data.length; i++){ html += '<option value="'+data[i].city_id+'">'+data[i].city_name+'</option>'; } $('#city').html(html); } }); }else{ $('#city').html('<option value="">请选择城市</option>'); $('#area').html('<option value="">请选择地区</option>'); } }); // 根据城市获取地区数据 $('#city').on('change', function(){ var cityId = $(this).val(); if(cityId){ $.ajax({ url: 'getAreaData', type: 'GET', data: {cityId: cityId}, dataType: 'json', success: function(data){ var html = '<option value="">请选择地区</option>'; for(var i=0; i<data.length; i++){ html += '<option value="'+data[i].area_id+'">'+data[i].area_name+'</option>'; } $('#area').html(html); } }); }else{ $('#area').html('<option value="">请选择地区</option>'); } }); }); ``` 3. 在后端编写接口,根据前端发送的请求参数返回对应的地区数据。具体实现方式可以根据实际情况选择使用数据库或者文件存储地区数据。 以上是一种基本的Java地区三级联动实现方式,具体实现方法可能会因为具体的业务需求而略有不同。
评论 8
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值