JavaScript实现省市县三级级联特效

JavaScript实现省市县三级级联特效攻略

简介

省市县三级级联特效是一种常见的前端开发需求，用于实现用户选择省份后，自动加载对应的城市，再选择城市后，自动加载对应的县区。本攻略将详细介绍如何使用JavaScript实现这一特效。

步骤

1. 准备数据

首先，我们需要准备省市县的数据。可以使用JSON格式的数据，例如：

const data = {
  \"provinces\": [
    {
      \"name\": \"省份1\",
      \"cities\": [
        {
          \"name\": \"城市1\",
          \"counties\": [\"县区1\", \"县区2\", \"县区3\"]
        },
        {
          \"name\": \"城市2\",
          \"counties\": [\"县区4\", \"县区5\", \"县区6\"]
        }
      ]
    },
    {
      \"name\": \"省份2\",
      \"cities\": [
        {
          \"name\": \"城市3\",
          \"counties\": [\"县区7\", \"县区8\", \"县区9\"]
        },
        {
          \"name\": \"城市4\",
          \"counties\": [\"县区10\", \"县区11\", \"县区12\"]
        }
      ]
    }
  ]
};

2. 创建HTML结构

在HTML中，我们需要创建省、市、县的下拉列表，以及一个用于显示选择结果的元素。示例代码如下：

<select id=\"province\"></select>
<select id=\"city\"></select>
<select id=\"county\"></select>
<div id=\"result\"></div>

3. 实现级联效果

接下来，我们使用JavaScript来实现级联效果。首先，我们需要获取省、市、县的下拉列表元素，并为它们添加事件监听器。

const provinceSelect = document.getElementById('province');
const citySelect = document.getElementById('city');
const countySelect = document.getElementById('county');
const resultDiv = document.getElementById('result');

provinceSelect.addEventListener('change', loadCities);
citySelect.addEventListener('change', loadCounties);
countySelect.addEventListener('change', showResult);

然后，我们编写加载城市和县区的函数。

function loadCities() {
  const selectedProvince = provinceSelect.value;
  const province = data.provinces.find(p => p.name === selectedProvince);

  // 清空城市和县区下拉列表
  citySelect.innerHTML = '';
  countySelect.innerHTML = '';

  // 添加城市选项
  province.cities.forEach(city => {
    const option = document.createElement('option');
    option.text = city.name;
    citySelect.add(option);
  });
}

function loadCounties() {
  const selectedProvince = provinceSelect.value;
  const selectedCity = citySelect.value;
  const province = data.provinces.find(p => p.name === selectedProvince);
  const city = province.cities.find(c => c.name === selectedCity);

  // 清空县区下拉列表
  countySelect.innerHTML = '';

  // 添加县区选项
  city.counties.forEach(county => {
    const option = document.createElement('option');
    option.text = county;
    countySelect.add(option);
  });
}

最后，我们编写显示选择结果的函数。

function showResult() {
  const selectedProvince = provinceSelect.value;
  const selectedCity = citySelect.value;
  const selectedCounty = countySelect.value;

  resultDiv.textContent = `您选择了：${selectedProvince} - ${selectedCity} - ${selectedCounty}`;
}

4. 初始化

最后一步是在页面加载完成后进行初始化，即加载省份选项。

window.addEventListener('DOMContentLoaded', () => {
  // 添加省份选项
  data.provinces.forEach(province => {
    const option = document.createElement('option');
    option.text = province.name;
    provinceSelect.add(option);
  });
});

示例说明

示例1：加载城市选项

当用户选择一个省份时，自动加载对应的城市选项。

// 用户选择了省份1
provinceSelect.value = '省份1';
loadCities();

示例2：显示选择结果

当用户选择完省、市、县后，自动显示选择的结果。

// 用户选择了省份1、城市1、县区2
provinceSelect.value = '省份1';
loadCities();
citySelect.value = '城市1';
loadCounties();
countySelect.value = '县区2';
showResult();

以上就是实现省市县三级级联特效的完整攻略。通过准备数据、创建HTML结构、实现级联效果和初始化，我们可以实现一个简单而实用的级联特效。