JSON+HTML实现国家省市联动选择效果

2023年5月27日上午9:18 • JavaScript

下面我将详细讲解“JSON+HTML实现国家省市联动选择效果”的完整攻略，包括以下几个方面：

准备数据

首先，我们需要准备国家省市的数据，放在一个JSON格式的数据文件中。例如，我们可以创建一个名为"china.json"的文件，内容如下：

{
  "country": [
    {
      "name": "中国",
      "province": [
        {
          "name": "北京市",
          "city": [
            {
              "name": "北京市"
            }
          ]
        },
        {
          "name": "上海市",
          "city": [
            {
              "name": "上海市"
            }
          ]
        }
        // 省份及其城市数据省略...
      ]
    }
  ]
}

这里我们只列出了简单的数据结构，实际上还可以根据需要添加更多的字段，例如省份和城市的编码等等。

加载数据

接下来，我们需要在HTML页面中加载上述JSON文件，并提取这些数据用于动态生成下拉框。

我们可以使用jQuery的$.getJSON()方法，如下所示：

$.getJSON('china.json', function(data) {
  // 这里可以对数据进行处理和验证
  // 然后根据数据动态生成下拉框
});

动态生成下拉框

接下来，我们可以根据上面加载得到的数据，动态生成国家省市联动选择的下拉框。

具体来说，我们需要先创建三个空的下拉框，并分别给它们添加一个id：

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

然后在JavaScript代码中，先获取到这三个下拉框的jQuery对象，例如：

var $country = $('#country');
var $province = $('#province');
var $city = $('#city');

接着，我们可以先将国家的下拉框进行初始化，代码如下：

// 初始化国家下拉框
$country.append($('<option value="-1">请选择</option>'));
$.each(data.country, function(index, item) {
  $country.append($('<option value="' + index + '">' + item.name + '</option>'));
});

上面的代码使用了jQuery的.each()方法遍历了所有的国家，并将它们分别添加为下拉框的选项。

接下来，我们需要在国家下拉框选项改变时，动态生成相应的省份选项。具体来说，我们需要绑定一个change事件到国家下拉框：

$country.on('change', function() {
  // 在国家选项改变时，动态生成省份选项
});

然后，我们可以根据选中的国家，在JSON数据中查找到相应的省份和城市数据，并动态生成省份的选项：

$province.empty().append($('<option value="-1">请选择</option>'));
$city.empty().append($('<option value="-1">请选择</option>'));

var countryIndex = $country.val();
var countryData = data.country[countryIndex];

if (countryData) {
  $.each(countryData.province, function(index, item) {
    $province.append($('<option value="' + index + '">' + item.name + '</option>'));
  });
}

在省份选项改变时，我们可以同样地去生成城市选项，代码如下：

$province.on('change', function() {
  // 在省份选项改变时，动态生成城市选项
});

var provinceIndex = $province.val();
var provinceData = countryData.province[provinceIndex];

if (provinceData) {
  $.each(provinceData.city, function(index, item) {
    $city.append($('<option value="' + index + '">' + item.name + '</option>'));
  });
}

完善交互体验

最后，我们还可以对联动选择的交互体验进行一些优化，例如在选项为空时提示用户选择，选项改变时自动跳转到下一级相关选项等。

下面是一个完整的示例代码，以供参考：

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>国家省市联动选择</title>
</head>

<body>
  <h1>国家省市联动选择</h1>

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

  <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
  <script>
    $.getJSON('china.json', function(data) {
      // 初始化国家下拉框
      var $country = $('#country');
      var $province = $('#province');
      var $city = $('#city');

      $country.append($('<option value="-1">请选择</option>'));
      $.each(data.country, function(index, item) {
        $country.append($('<option value="' + index + '">' + item.name + '</option>'));
      });

      // 在国家选项改变时，动态生成省份选项
      $country.on('change', function() {
        var countryIndex = $country.val();
        var countryData = data.country[countryIndex];

        $province.empty().append($('<option value="-1">请选择</option>'));
        $city.empty().append($('<option value="-1">请选择</option>'));

        if (countryData) {
          $.each(countryData.province, function(index, item) {
            $province.append($('<option value="' + index + '">' + item.name + '</option>'));
          });
        }
      });

      // 在省份选项改变时，动态生成城市选项
      $province.on('change', function() {
        var countryIndex = $country.val();
        var countryData = data.country[countryIndex];

        var provinceIndex = $province.val();
        var provinceData = countryData.province[provinceIndex];

        $city.empty().append($('<option value="-1">请选择</option>'));

        if (provinceData) {
          $.each(provinceData.city, function(index, item) {
            $city.append($('<option value="' + index + '">' + item.name + '</option>'));
          });
        }
      });
    });
  </script>
</body>

</html>

也可以参考以下两个示例：

示例1：https://codepen.io/kyleluo/pen/LyJZQR

示例2：https://codepen.io/clavelle/pen/LJvNBr

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JSON+HTML实现国家省市联动选择效果 - Python技术站