正文

学会JS三级联动，轻松实现地区选择

/0 浏览量
0806

在网页开发中，地区选择是一个常见的功能，三级联动（省、市、区）能够提供更加精确和便捷的用户体验。下面，我将详细讲解如何使用JavaScript实现一个简单的三级联动地区选择功能。

一、准备工作

在开始编写代码之前，我们需要准备以下内容：

  1. HTML结构：创建一个用于显示地区选择的下拉菜单。
  2. JavaScript代码：编写用于处理联动逻辑的JavaScript函数。
  3. 数据源：准备一个包含省、市、区信息的JSON数据。

HTML结构

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

数据源

[
  {
    "province": "浙江省",
    "cities": [
      {
        "city": "杭州市",
        "districts": ["上城区", "下城区", "江干区"]
      },
      {
        "city": "宁波市",
        "districts": ["海曙区", "江东区", "江北区"]
      }
    ]
  },
  {
    "province": "江苏省",
    "cities": [
      {
        "city": "南京市",
        "districts": ["玄武区", "秦淮区", "建邺区"]
      },
      {
        "city": "苏州市",
        "districts": ["姑苏区", "吴中区", "相城区"]
      }
    ]
  }
]

二、JavaScript代码实现

初始化省份数据

function initProvinces(data) {
  const provinceSelect = document.getElementById('province');
  data.forEach((item, index) => {
    const option = document.createElement('option');
    option.value = index;
    option.textContent = item.province;
    provinceSelect.appendChild(option);
  });
}

initProvinces(yourDataSource);

初始化市数据

function initCities(provinceIndex, data) {
  const citySelect = document.getElementById('city');
  const provinceData = data[provinceIndex];
  citySelect.innerHTML = ''; // 清空现有选项
  provinceData.cities.forEach((item, index) => {
    const option = document.createElement('option');
    option.value = index;
    option.textContent = item.city;
    citySelect.appendChild(option);
  });
}

document.getElementById('province').addEventListener('change', function() {
  const provinceIndex = this.value;
  initCities(provinceIndex, yourDataSource);
});

初始化区数据

function initDistricts(cityIndex, provinceIndex, data) {
  const districtSelect = document.getElementById('district');
  const cityData = data[provinceIndex].cities[cityIndex];
  districtSelect.innerHTML = ''; // 清空现有选项
  cityData.districts.forEach((item, index) => {
    const option = document.createElement('option');
    option.value = index;
    option.textContent = item;
    districtSelect.appendChild(option);
  });
}

document.getElementById('city').addEventListener('change', function() {
  const cityIndex = this.value;
  const provinceIndex = document.getElementById('province').value;
  initDistricts(cityIndex, provinceIndex, yourDataSource);
});

三、总结

通过以上步骤，我们成功实现了一个简单的三级联动地区选择功能。在实际应用中，可以根据需求对代码进行扩展和优化，例如添加加载动画、错误处理等。

希望这篇文章能够帮助你轻松掌握JS三级联动的实现方法。如果你有任何疑问或建议，欢迎在评论区留言交流。

-- 展开阅读全文 --