正文

学会用jQuery实现五级政区联动，轻松搭建行政区划选择器

/0 浏览量
0716

在网站开发中，政区联动选择器是一个常见的功能，它允许用户通过级联选择来选择具体的行政区划。使用jQuery实现五级政区联动，可以大大简化开发过程，提高用户体验。下面，我将详细讲解如何使用jQuery实现这一功能。

准备工作

在开始之前，你需要准备以下内容：

  1. HTML结构：创建一个简单的HTML结构，包含五个下拉选择框，分别对应省、市、县、乡、村。
  2. jQuery库：确保你的项目中已经包含了jQuery库。
  3. 政区数据：准备一个包含全国五级政区数据的JSON文件。

HTML结构

以下是一个简单的HTML结构示例：

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

政区数据

政区数据可以是一个包含所有省、市、县、乡、村信息的JSON对象。以下是一个示例：

{
  "北京": {
    "北京市": {
      "东城区": ["东直门", "朝阳门"],
      "西城区": ["西单", "崇文门"]
    }
  },
  "上海": {
    "上海市": {
      "黄浦区": ["南京东路", "人民广场"],
      "徐汇区": ["徐家汇", "漕河泾"]
    }
  }
}

jQuery代码

接下来，我们将使用jQuery来实现政区联动。

$(document).ready(function() {
  // 初始化省份数据
  var provinces = ['北京', '上海'];
  var cities = {};
  var counties = {};
  var towns = {};
  var villages = {};

  // 初始化省份数据
  function initProvinces() {
    $('#province').empty();
    $.each(provinces, function(index, province) {
      $('#province').append($('<option>', {
        value: province,
        text: province
      }));
    });
  }

  // 初始化市份数据
  function initCities(province) {
    $('#city').empty();
    var cityList = cities[province];
    if (cityList) {
      $.each(cityList, function(index, city) {
        $('#city').append($('<option>', {
          value: city,
          text: city
        }));
      });
    }
  }

  // 初始化县份数据
  function initCounties(province, city) {
    $('#county').empty();
    var countyList = counties[province][city];
    if (countyList) {
      $.each(countyList, function(index, county) {
        $('#county').append($('<option>', {
          value: county,
          text: county
        }));
      });
    }
  }

  // 初始化乡份数据
  function initTowns(province, city, county) {
    $('#town').empty();
    var townList = towns[province][city][county];
    if (townList) {
      $.each(townList, function(index, town) {
        $('#town').append($('<option>', {
          value: town,
          text: town
        }));
      });
    }
  }

  // 初始化村份数据
  function initVillages(province, city, county, town) {
    $('#village').empty();
    var villageList = villages[province][city][county][town];
    if (villageList) {
      $.each(villageList, function(index, village) {
        $('#village').append($('<option>', {
          value: village,
          text: village
        }));
      });
    }
  }

  // 初始化数据
  initProvinces();

  // 监听省份数据变化
  $('#province').change(function() {
    var province = $(this).val();
    initCities(province);
  });

  // 监听市份数据变化
  $('#city').change(function() {
    var province = $('#province').val();
    var city = $(this).val();
    initCounties(province, city);
  });

  // 监听县份数据变化
  $('#county').change(function() {
    var province = $('#province').val();
    var city = $('#city').val();
    var county = $(this).val();
    initTowns(province, city, county);
  });

  // 监听乡份数据变化
  $('#town').change(function() {
    var province = $('#province').val();
    var city = $('#city').val();
    var county = $('#county').val();
    var town = $(this).val();
    initVillages(province, city, county, town);
  });
});

总结

通过以上步骤，你可以使用jQuery轻松实现五级政区联动。在实际应用中，你可以根据需要调整HTML结构和政区数据，以满足不同的需求。希望这篇文章能帮助你搭建出满意的行政区划选择器。

-- 展开阅读全文 --