Html实现全国省市区三级联动

目录

前言

1.全国省市区的Json数据

2.找到Json数据文件(在此博文绑定资源)之后，放到resource目录下。

3.通过类加载器加载资源文件，读取Json文件

        3.1 创建JsonLoader类

          3.2 注入JsonLoader实体，解析Json文件 

4.构建前端Html页面

5.通过ajax获取从后端获取数据 

6.通过监听事件，完成Html省市区联动 

7.实现效果

---

前言

       关键技术：SpringBoot、Html、Jquery、js、ajax

        在网上找到的资料都比较乱，对于初学者来说，可能不太友好。以前，我刚开始学习Html的时候，也搞不清楚这个要怎么做，找了好久的资料都没法实现，就算是实现了，也没有完整的教程，现在实现了，整理好了，就想分享一下给每一位热爱编程的小伙伴。

1.全国省市区的Json数据

[{"province": "北京市","code": "110000","citys": [{"city": "北京市","code": "110100000000","areas": [{"area": "东城区","code": "110101000000"},{"area": "西城区","code": "110102000000"},{"area": "朝阳区","code": "110105000000"},{"area": "丰台区","code": "110106000000"},{"area": "石景山区","code": "110107000000"},{"area": "海淀区","code": "110108000000"},{"area": "门头沟区","code": "110109000000"},{"area": "房山区","code": "110111000000"},{"area": "通州区","code": "110112000000"},{"area": "顺义区","code": "110113000000"},{"area": "昌平区","code": "110114000000"},{"area": "大兴区","code": "110115000000"},{"area": "怀柔区","code": "110116000000"},{"area": "平谷区","code": "110117000000"},{"area": "密云区","code": "110118000000"},{"area": "延庆区","code": "110119000000"}]}]}
......此处省略好多个省市区。
]

2.找到Json数据文件(在此博文绑定资源)之后，放到resource目录下。

3.通过类加载器加载资源文件，读取Json文件

        3.1 创建JsonLoader类

package com.company.project.utils;import com.alibaba.fastjson.JSONArray;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.core.io.Resource;
import org.springframework.core.io.ResourceLoader;
import org.springframework.stereotype.Component;import java.io.BufferedReader;
import java.io.IOException;
import java.io.InputStream;
import java.io.InputStreamReader;@Component
public class JsonLoader {@Autowiredprivate ResourceLoader resourceLoader;public JSONArray loadJsonFile(String fileName) throws IOException {Resource resource = resourceLoader.getResource("classpath:" + fileName);try (InputStream inputStream = resource.getInputStream();BufferedReader reader = new BufferedReader(new InputStreamReader(inputStream))) {StringBuilder result = new StringBuilder();String line;while ((line = reader.readLine()) != null) {result.append(line).append("\n");}return JSONArray.parseArray(result.toString());}}
}

          3.2 注入JsonLoader实体，解析Json文件 

4.构建前端Html页面

<div class="layui-form" style="margin: 20px;"><div class="layui-form-item"><label class="layui-form-label">省份：</label><div class="layui-input-block"><select class="custom-select" name="province" id="province" lay-verify="required" lay-search=""><option value="">请选择省份</option></select></div></div><div class="layui-form-item"><label class="layui-form-label">城市：</label><div class="layui-input-block"><select class="custom-select"  name="city" id="city" lay-verify="required" lay-search=""><option value="">请选择城市</option></select></div></div><div class="layui-form-item"><label class="layui-form-label">区县：</label><div class="layui-input-block"><select class="custom-select"  name="county" id="county" lay-verify="required" lay-search=""><option value="">请选择区县</option></select></div></div></div>

5.通过ajax获取从后端获取数据 

 /// 使用jQuery的$.ajax方法$.ajax({url: ctx + 'zhWeather/getCity', // 你要请求的URLtype: 'GET', // 请求方式，GET或POSTdataType: 'json', // 预期服务器返回的数据类型data: { // 发送到服务器的数据},success: function(data) {loadData(JSON.stringify(data.data))// 请求成功时执行的回调函数console.log(data); // 处理返回的数据},error: function(xhr, status, error) {// 请求失败时执行的回调函数console.error("请求失败: " + error);}});

6.通过监听事件，完成Html省市区联动 

 //select2搜索下拉列表样式$('.custom-select').select2({placeholder: '请选择',allowClear: true});// 假设这是从Ajax请求中获取的，因此我们将其放入一个函数中function loadData(data) {data = JSON.parse(data)// 填充省份$.each(data, function(index, province) {$('#province').append($('<option>', {value: province.code,text: province.province}));});// 省份选择变化时，填充城市$('#province').change(function() {var selectedProvinceCode = $(this).val();var cityOptions = '';$.each(data, function(index, province) {if (province.code === selectedProvinceCode) {$.each(province.citys, function(index, city) {cityOptions += '<option value="' + city.code + '">' + city.city + '</option>';});}});$('#city').html('<option value="">请选择城市</option>' + cityOptions);$('#county').html('<option value="">请选择区县</option>'); // 清除区县选项});// 城市选择变化时，填充区县（这里省略，逻辑与填充城市类似）$('#city').change(function() {var selectedCityCode = $(this).val();var countyOptions = '<option value="">请选择区县</option>';var currentProvinceCode = $('#province').val(); // 获取当前选中的省份代码// 遍历data数组找到对应的省份和城市$.each(data, function(index, province) {if (province.code === currentProvinceCode) {$.each(province.citys, function(index, city) {if (city.code === selectedCityCode) {// 找到对应的城市后，遍历其区县$.each(city.areas, function(index, area) {countyOptions += '<option value="' + area.code + '">' + area.area + '</option>';});// 一旦找到匹配的城市，就跳出内层循环return false;}});// 一旦找到匹配的省份，也跳出外层循环（可选，但在这个场景下可能不是必需的）// return false;}});$('#county').html(countyOptions);});// 初始化时选择一个省份（可选）$('#province').val(data[0].code).trigger('change');}

7.实现效果

我会把项目绑定到博文资源文件，希望能够帮助到大家。谢谢