简介

JSON+Jquery省市区三级联动是一种实现省市区三级联动的前端技术。通过JSON文件存储省市区信息，利用Jquery编写前端代码实现三级联动效果。该技术已广泛应用于各类网站和APP中。

实现步骤

步骤一：准备JSON数据

首先，需要准备一份含有所有省市区信息的JSON数据文件。该文件中包含省市区的名称及其对应的id，如下所示：

{
  "province": [{
    "id": "110000",
    "name": "北京市"
  }, {
    "id": "120000",
    "name": "天津市"
  }, {
    "id": "130000",
    "name": "河北省"
  }],
  "city": [{
    "id": "110100",
    "name": "市辖区",
    "provinceId": "110000"
  }, {
    "id": "120100",
    "name": "市辖区",
    "provinceId": "120000"
  }, {
    "id": "130100",
    "name": "石家庄市",
    "provinceId": "130000"
  }],
  "district": [{
    "id": "110101",
    "name": "东城区",
    "cityId": "110100"
  }, {
    "id": "110102",
    "name": "西城区",
    "cityId": "110100"
  }, {
    "id": "120101",
    "name": "和平区",
    "cityId": "120100"
  }]
}

步骤二：编写HTML代码

编写HTML代码，实现一个包含省市区三级联动的表单。其中，省、市、区分别用select标签实现。如下所示：

<form>
  <select id="province" name="province"></select>
  <select id="city" name="city"></select>
  <select id="district" name="district"></select>
</form>

步骤三：编写Jquery代码

通过Jquery实现省市区三级联动，代码如下：

$(function () {
  // 加载省份数据
  $.getJSON('/path/to/provinces.json', function(data) {
    var options = '<option value="">请选择省份</option>';
    $.each(data.province, function (i, province) {
      options += '<option value="' + province.id + '">' + province.name + '</option>';
    });
    $('#province').html(options);
  });

  // 加载城市数据
  $('#province').on('change', function () {
    var provinceId = $(this).val();
    if (provinceId) {
      $.getJSON('/path/to/cities.json', {provinceId: provinceId}, function(data) {
        var options = '<option value="">请选择城市</option>';
        $.each(data.city, function (i, city) {
          options += '<option value="' + city.id + '">' + city.name + '</option>';
        });
        $('#city').html(options);
      });
    } else {
      $('#city').html('<option value="">请选择城市</option>');
    }
  });

  // 加载区县数据
  $('#city').on('change', function () {
    var cityId = $(this).val();
    if (cityId) {
      $.getJSON('/path/to/districts.json', {cityId: cityId}, function(data) {
        var options = '<option value="">请选择区县</option>';
        $.each(data.district, function (i, district) {
          options += '<option value="' + district.id + '">' + district.name + '</option>';
        });
        $('#district').html(options);
      });
    } else {
      $('#district').html('<option value="">请选择区县</option>');
    }
  });
});

示例

以下是两个不同的示例，展示了JSON+Jquery省市区三级联动的应用。第一个示例是基于Bootstrap的插件，第二个示例是基于layui的插件。

示例一：基于Bootstrap的插件

HTML代码

<form>
  <div class="form-group">
    <label for="province">省份</label>
    <select class="form-control" id="province" name="province"></select>
  </div>
  <div class="form-group">
    <label for="city">城市</label>
    <select class="form-control" id="city" name="city"></select>
  </div>
  <div class="form-group">
    <label for="district">区县</label>
    <select class="form-control" id="district" name="district"></select>
  </div>
</form>

JS代码

$(function () {
  $('#province').citySelect({
    url: '/path/to/provinces.json',
    prov: '',
    city: '',
    dist: ''
  });
});

示例二：基于layui的插件

HTML代码

<div class="layui-form-item">
  <label class="layui-form-label">省份</label>
  <div class="layui-input-inline">
    <select id="province" name="province"></select>
  </div>
  <div class="layui-form-mid layui-word-aux">请选择省份</div>
</div>
<div class="layui-form-item">
  <label class="layui-form-label">城市</label>
  <div class="layui-input-inline">
    <select id="city" name="city"></select>
  </div>
  <div class="layui-form-mid layui-word-aux">请选择城市</div>
</div>
<div class="layui-form-item">
  <label class="layui-form-label">区县</label>
  <div class="layui-input-inline">
    <select id="district" name="district"></select>
  </div>
  <div class="layui-form-mid layui-word-aux">请选择区县</div>
</div>

JS代码

layui.use(['form', 'city'], function () {
  var form = layui.form, city = layui.city;
  city.init({
    url: '/path/to/provinces.json',
    province: '#province',
    city: '#city',
    area: '#district'
  });
});