jeecgboot 前端通过area-data的数据填充到组件j-area-linkage完成省市区三级联动

首先，需要在前端页面引入area-data.js文件，该文件包含了省市区数据的json格式。

然后，在组件j-area-linkage中，需要定义三个下拉框，分别对应省、市、区。在页面加载完成后，通过调用area-data中的数据，将省份数据填充到省下拉框中。

当用户选择省份时，通过JavaScript代码动态生成对应的城市数据，并填充到市下拉框中。同理，当用户选择城市后，通过代码生成对应的区/县数据，并填充到区下拉框中。

最后，当用户选择完省市区的数据后，可以通过JavaScript代码获取用户选择的三个值，以便后续的业务逻辑处理。

以下是一个示例代码：

HTML部分：

<div class="form-group">
  <label for="province">省份：</label>
  <select class="form-control" id="province"></select>
</div>

<div class="form-group">
  <label for="city">城市：</label>
  <select class="form-control" id="city"></select>
</div>

<div class="form-group">
  <label for="district">区/县：</label>
  <select class="form-control" id="district"></select>
</div>

JavaScript部分：

// 填充省份数据
var provinceSelect = document.getElementById("province");
for (var province in areaData) {
  var option = document.createElement("option");
  option.value = province;
  option.text = province;
  provinceSelect.add(option);
}

// 省份下拉框选择事件
provinceSelect.onchange = function() {
  var citySelect = document.getElementById("city");
  var districtSelect = document.getElementById("district");
  citySelect.options.length = 0;
  districtSelect.options.length = 0;
  var province = provinceSelect.value;
  if (province != "") {
    // 填充城市数据
    for (var city in areaData[province]) {
      var option = document.createElement("option");
      option.value = city;
      option.text = city;
      citySelect.add(option);
    }
  }
}

// 城市下拉框选择事件
citySelect.onchange = function() {
  var districtSelect = document.getElementById("district");
  districtSelect.options.length = 0;
  var province = provinceSelect.value;
  var city = citySelect.value;
  if (province != "" && city != "") {
    // 填充区/县数据
    for (var district in areaData[province][city]) {
      var option = document.createElement("option");
      option.value = district;
      option.text = district;
      districtSelect.add(option);
    }
  }
}

// 获取用户选择的省份、城市、区/县
function getSelectedValue() {
  var province = provinceSelect.value;
  var city = citySelect.value;
  var district = districtSelect.value;
  console.log(province + "-" + city + "-" + district);
}