基于json的jquery地区联动效果代码

下面是介绍“基于json的jquery地区联动效果代码”的完整攻略及示例：

1. 代码介绍

这段代码使用了jQuery库，通过JSON数据实现了省市县的三级联动，用户选择省份后，其下面的市区和县区也会随之更新。

代码大致流程包括：

• 读取JSON数据
• 给省份下拉框添加change监听事件
• 根据选中的省份更新对应的市区和县区下拉框

下面是代码示例：

// 读取JSON数据
$.getJSON("area.json", function(data) {
  // 给省份下拉框添加选项
  var provinceSelect = $("#province");
  $.each(data, function(key, val) {
    provinceSelect.append("<option value='" + key +"'>" + val.name + "</option>");
  });

  // 给省份下拉框添加change监听事件，根据选中的省份更新市区和县区
  provinceSelect.change(function() {
    var selectedProvince = $(this).val();
    var citySelect = $("#city");
    var countySelect = $("#county");

    // 更新市区下拉框
    citySelect.empty().append("<option value=''>请选择</option>");
    $.each(data[selectedProvince].cityList, function(key, val) {
      citySelect.append("<option value='" + key +"'>" + val.name + "</option>");
    });

    // 更新县区下拉框
    countySelect.empty().append("<option value=''>请选择</option>");
    $.each(data[selectedProvince].cityList[0].countyList, function(key, val) {
      countySelect.append("<option value='" + val.name +"'>" + val.name + "</option>");
    });
  });

});

2. 示例说明

示例1

地区数据为：

{
  "湖南省": {
    "name": "湖南省",
    "cityList": {
      "长沙市": {
        "name": "长沙市",
        "countyList": [
          {"name":"天心区"},
          {"name":"岳麓区"},
          {"name":"芙蓉区"}
        ]
      },
      "株洲市": {
        "name": "株洲市",
        "countyList": [
          {"name":"天元区"},
          {"name":"荷塘区"},
          {"name":"石峰区"}
        ]
      }
    }
  }
}

在html中添加下拉框：

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

在JavaScript中使用示例：

$(document).ready(function() {

  // 加载地区数据
  $.getJSON("area.json", function(data) {
    // 添加省份选项
    var provinceSelect = $("#province");
    $.each(data, function(key, val) {
      provinceSelect.append("<option value='" + key +"'>" + val.name + "</option>");
    });

    // 更新市区和县区选项
    provinceSelect.change(function() {
      var selectedProvince = $(this).val();
      var citySelect = $("#city");
      var countySelect = $("#county");

      // 更新市区选项
      citySelect.empty().append("<option value=''>请选择</option>");
      $.each(data[selectedProvince].cityList, function(key, val) {
        citySelect.append("<option value='" + key +"'>" + val.name + "</option>");
      });

      // 更新县区选项
      countySelect.empty().append("<option value=''>请选择</option>");
      $.each(data[selectedProvince].cityList[0].countyList, function(key, val) {
        countySelect.append("<option value='" + val.name +"'>" + val.name + "</option>");
      });
    });

  });
});

当用户在下拉框中选中“湖南省”后，市区下拉框中就会显示“长沙市”和“株洲市”，县区下拉框会显示“天心区”、“岳麓区”、“芙蓉区”等选项。

示例2

地区数据为：

{
  "广东省": {
    "name": "广东省",
    "cityList": {
      "广州市": {
        "name": "广州市",
        "countyList": [
          {"name":"天河区"},
          {"name":"海珠区"},
          {"name":"白云区"}
        ]
      },
      "深圳市": {
        "name": "深圳市",
        "countyList": [
          {"name":"福田区"},
          {"name":"罗湖区"},
          {"name":"宝安区"}
        ]
      }
    }
  }
}

在html中添加下拉框：

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

在JavaScript中使用示例：

$(document).ready(function() {

  // 加载地区数据
  $.getJSON("area.json", function(data) {
    // 添加省份选项
    var provinceSelect = $("#province");
    $.each(data, function(key, val) {
      provinceSelect.append("<option value='" + key +"'>" + val.name + "</option>");
    });

    // 更新市区和县区选项
    provinceSelect.change(function() {
      var selectedProvince = $(this).val();
      var citySelect = $("#city");
      var countySelect = $("#county");

      // 更新市区选项
      citySelect.empty().append("<option value=''>请选择</option>");
      $.each(data[selectedProvince].cityList, function(key, val) {
        citySelect.append("<option value='" + key +"'>" + val.name + "</option>");
      });

      // 更新县区选项
      countySelect.empty().append("<option value=''>请选择</option>");
      $.each(data[selectedProvince].cityList[0].countyList, function(key, val) {
        countySelect.append("<option value='" + val.name +"'>" + val.name + "</option>");
      });
    });

  });
});

当用户在下拉框中选中“广东省”后，市区下拉框中就会显示“广州市”和“深圳市”，县区下拉框会显示“天河区”、“海珠区”、“白云区”等选项。

希望这个示例对你有帮助！