基于jquery & json的省市区联动代码

下面是详细讲解“基于jquery & json的省市区联动代码”的完整攻略：

一、前置知识

在学习该省市区联动代码之前，需要了解以下知识：

• HTML基础语法，如标签、属性、表单等；
• JavaScript基础知识，如变量、流程控制、函数等；
• jQuery基础知识，如元素选择器、事件绑定、DOM操作等；
• JSON数据格式，如键值对、数组等。

二、数据源准备

该省市区联动代码是基于JSON数据实现的，因此我们需要准备好对应的JSON数据源。

我们可以从以下网站中获取相应的JSON数据：

• 全国省市区三级联动数据。
• 城市数据网，该网站提供了全球绝大部分国家和地区的省市区数据，需要自行筛选。
• 高德地图开放平台，该网站提供了中国省市区县四级行政区划数据，需要提供高德开发者账号才能获取数据。

例如我们选择使用全国省市区三级联动数据，下载地址为 Administrative-divisions-of-China。

三、数据解析

接下来，我们需要解析JSON数据，将省市区数据以及对应的ID值提取出来，以便后面的联动操作。

var data = [
  {
    "name": "北京市",
    "id": "110000",
    "city": [
      {
        "name": "市辖区",
        "id": "110100",
        "area": [...]
      },
      ...
    ]
  },
  ...
];

var provinces = []; // 省份列表
var cities = {}; // 城市列表
var areas = {}; // 地区列表

// 解析省份数据
data.forEach(function(province) {
  provinces.push({
    name: province.name,
    value: province.id
  });

  // 解析城市数据
  var cityList = [];
  province.city.forEach(function(city) {
    cityList.push({
        name: city.name,
        value: city.id
    });

    // 解析地区数据
    var areaList = [];
    if (city.area) {
      city.area.forEach(function(area) {
        areaList.push({
          name: area.name,
          value: area.id
        });
      });
    }
    areas[city.id] = areaList;
  });
  cities[province.id] = cityList;
});

四、页面构建

现在我们开始构建页面部分。首先需要在HTML页面中引入jQuery库和解析后的省市区数据。

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="data.js"></script>

<select id="province"></select>
<select id="city"></select>
<select id="area"></select>

然后，在JavaScript中进行页面元素的生成和联动操作。首先生成省份列表：

// 生成省份下拉列表
var provinceSelect = $('#province');
provinces.forEach(function(province) {
  var option = $('<option>').val(province.value).text(province.name);
  provinceSelect.append(option);
});

然后根据省份选择联动生成城市列表：

// 生成城市下拉列表
var citySelect = $('#city');
provinceSelect.change(function() {
  var provinceId = $(this).val();

  if (provinceId in cities) {
    citySelect.empty();
    var cityList = cities[provinceId];
    cityList.forEach(function(city) {
      var option = $('<option>').val(city.value).text(city.name);
      citySelect.append(option);
    });

    // 触发城市选择事件，联动生成地区列表
    citySelect.change();
  }
});

最后联动生成地区列表：

// 生成地区下拉列表
var areaSelect = $('#area');
citySelect.change(function() {
  var cityId = $(this).val();

  if (cityId in areas) {
    areaSelect.empty();
    var areaList = areas[cityId];
    areaList.forEach(function(area) {
      var option = $('<option>').val(area.value).text(area.name);
      areaSelect.append(option);
    });
  }
});

五、示例说明

下面给出两个具体的示例，以帮助理解这个联动代码的实现方式。

示例一

在该示例中，我们使用了三个下拉框，实现了省市区三级联动效果。代码实现方式如下：

// 生成省份下拉列表
var provinceSelect = $('#province');
provinces.forEach(function(province) {
  var option = $('<option>').val(province.value).text(province.name);
  provinceSelect.append(option);
});

// 生成城市下拉列表
var citySelect = $('#city');
provinceSelect.change(function() {
  var provinceId = $(this).val();

  if (provinceId in cities) {
    citySelect.empty();
    var cityList = cities[provinceId];
    cityList.forEach(function(city) {
      var option = $('<option>').val(city.value).text(city.name);
      citySelect.append(option);
    });

    // 触发城市选择事件，联动生成地区列表
    citySelect.change();
  }
});

// 生成地区下拉列表
var areaSelect = $('#area');
citySelect.change(function() {
  var cityId = $(this).val();

  if (cityId in areas) {
    areaSelect.empty();
    var areaList = areas[cityId];
    areaList.forEach(function(area) {
      var option = $('<option>').val(area.value).text(area.name);
      areaSelect.append(option);
    });
  }
});

示例二

在该示例中，我们使用了两个下拉框，实现了省市二级联动效果。具体代码实现方式如下：

// 生成省份下拉列表
var provinceSelect = $('#province');
provinces.forEach(function(province) {
  var option = $('<option>').val(province.value).text(province.name);
  provinceSelect.append(option);
});

// 生成城市下拉列表
var citySelect = $('#city');
provinceSelect.change(function() {
  var provinceId = $(this).val();

  if (provinceId in cities) {
    citySelect.empty();
    var cityList = cities[provinceId];
    cityList.forEach(function(city) {
      var option = $('<option>').val(city.value).text(city.name);
      citySelect.append(option);
    });
  }
});

以上是“基于jquery & json的省市区联动代码”的完整攻略。希望对您有所帮助。