基于jquery实现省市联动特效

基于jQuery实现省市联动特效攻略

介绍

在网页开发过程中，我们常常需要实现省市联动的功能，即在省份下拉列表的选择影响城市下拉列表的选项。本攻略将详细讲解如何基于jQuery实现省市联动特效。

步骤

1. 创建HTML页面

首先需要在HTML页面中创建两个下拉列表，分别用于选择省份和城市。代码如下：

<select id="province">
  <option value="">请选择</option>
  <option value="1">北京</option>
  <option value="2">上海</option>
  <option value="3">广东</option>
  <!-- more options... -->
</select>

<select id="city">
  <option value="">请选择</option>
</select>

1. 加载jQuery库

为了使用jQuery，需要先加载jQuery库文件。可以通过以下代码将jQuery库文件引入到HTML页面中：

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

1. 编写jQuery代码

接下来需要编写jQuery代码，实现省份选择对城市下拉列表的影响。代码见下：

// 当省份选择框被改变时
$("#province").change(function() {
  // 获取所选省份的ID
  var provinceId = $(this).val();
  // 如果省份未选择，清空城市下拉列表
  if (provinceId === "") {
    $("#city").empty();
    return;
  }
  // 发送异步请求获取该省份的城市列表数据
  $.get("/getCityList?provinceId=" + provinceId, function(data) {
    // 按照返回数据填充城市下拉列表
    $("#city").empty();
    for (var i = 0; i < data.length; i++) {
      var city = data[i];
      var option = "<option value='" + city.id + "'>" + city.name + "</option>";
      $("#city").append(option);
    }
  });
});

以上代码用到了jQuery的异步请求方法get()，通过向服务器发送请求获取对应省份的城市列表数据。返回的数据格式为JSON，需要按照规定的格式进行解析和处理。

示例

下面提供两个示例，详细说明如何将本攻略中的代码应用到具体的网页中。

示例一：使用本地JSON数据源

考虑到服务器请求的数据源可能不稳定，我们可以先在本地创建一个JSON格式的数据源，用于测试。首先创建一个名为data.json的文件，用于存放测试数据，内容如下：

[
  {
    "id": 1,
    "name": "北京",
    "cities": [
      {"id": 101, "name": "东城区"},
      {"id": 102, "name": "西城区"},
      {"id": 103, "name": "朝阳区"},
      {"id": 104, "name": "海淀区"},
      {"id": 105, "name": "丰台区"},
      {"id": 106, "name": "石景山区"},
      {"id": 107, "name": "通州区"},
      {"id": 108, "name": "顺义区"},
      {"id": 109, "name": "昌平区"},
      {"id": 110, "name": "大兴区"},
      {"id": 111, "name": "怀柔区"},
      {"id": 112, "name": "平谷区"}
    ]
  },
  {
    "id": 2,
    "name": "上海",
    "cities": [
      {"id": 201, "name": "黄浦区"},
      {"id": 202, "name": "徐汇区"},
      {"id": 203, "name": "长宁区"},
      {"id": 204, "name": "静安区"},
      {"id": 205, "name": "普陀区"},
      {"id": 206, "name": "虹口区"},
      {"id": 207, "name": "杨浦区"},
      {"id": 208, "name": "闵行区"},
      {"id": 209, "name": "宝山区"},
      {"id": 210, "name": "嘉定区"},
      {"id": 211, "name": "浦东新区"},
      {"id": 212, "name": "金山区"},
      {"id": 213, "name": "松江区"},
      {"id": 214, "name": "青浦区"},
      {"id": 215, "name": "奉贤区"}
    ]
  },
  {
    "id": 3,
    "name": "广东",
    "cities": [
      {"id": 301, "name": "广州市"},
      {"id": 302, "name": "深圳市"},
      {"id": 303, "name": "珠海市"},
      {"id": 304, "name": "汕头市"},
      ...
    ]
  }
]

在HTML页面中引入上面的两个下拉列表和jQuery库文件，然后将get()请求的路由改为/data.json：

$("#province").change(function() {
  var provinceId = $(this).val();
  if (provinceId === "") {
    $("#city").empty();
    return;
  }
  $.get("/data.json", function(data) {
    var cities = data[provinceId - 1].cities;
    $("#city").empty();
    for (var i = 0; i < cities.length; i++) {
      var city = cities[i];
      var option = "<option value='" + city.id + "'>" + city.name + "</option>";
      $("#city").append(option);
    }
  });
});

示例二：动态请求服务器数据源

在实际项目中，数据源通常存储在服务器端，需要通过ajax请求获取。下面提供一个示例，可用于请求某个在线的省市列表数据源。

考虑到网速可能会影响数据获取的速度，我们需要在请求过程中加入一些提示信息，让用户明白数据正在加载中，不会感到困惑。我们可以在下拉列表中预设一个“正在加载中”的选项，用户点击后就可以看到请求数据的进度。

首先修改HTML页面，添加“正在加载中”选项：

<select id="province">
  <option value="">请选择</option>
  <option value="1">北京</option>
  <option value="2">上海</option>
  <option value="3">广东</option>
  <!-- more options... -->
</select>

<select id="city">
  <option value="">请选择</option>
  <option id="loading" disabled hidden>正在加载中...</option>
</select>

然后在jQuery代码中加入“加载中”状态的处理代码：

$("#province").change(function() {
  var provinceId = $(this).val();
  if (provinceId === "") {
    $("#city").empty();
    return;
  }
  $("#city").empty().append('<option id="loading" disabled selected>正在加载中...</option>');
  $.get("/getCityList?provinceId=" + provinceId, function(data) {
    $("#city").empty();
    for (var i = 0; i < data.length; i++) {
      var city = data[i];
      var option = "<option value='" + city.id + "'>" + city.name + "</option>";
      $("#city").append(option);
    }
  });
});

以上代码加入了一个“加载中”选项，在数据获取成功后再将其删除。同时，需要将下拉列表的第一个选项设置为“disabled selected”，用户无法选择该选项，而是强制选择可以选中的选项。

结论

通过本攻略，我们可以很方便地实现省市联动特效。通过以上两个示例，你已经明白如何将代码应用到具体的网页项目中。