js城市级联菜单通用

城市级联菜单是一种常见的前端交互组件，用于展示具有层级关系的数据，例如国家、省份、城市等。在JavaScript中实现城市级联菜单，通常涉及以下几个基础概念：

基础概念

DOM操作：用于动态创建、修改和删除HTML元素。
事件监听：用于响应用户的交互行为，如点击事件。
异步请求：用于从服务器获取数据，常见的有XMLHttpRequest或fetch API。
JSON数据格式：轻量级的数据交换格式，易于人阅读和编写，也易于机器解析和生成。

优势

用户体验：提供直观的选择方式，减少用户输入错误。
数据维护：便于后台管理和更新层级数据。
灵活性：可以根据需求自定义样式和交互逻辑。

类型

静态级联菜单：数据直接写在前端代码中。
动态级联菜单：数据通过异步请求从服务器获取。

应用场景

注册页面：选择国家、省份、城市等信息。
物流系统：选择配送地址。
数据分析工具：按地理位置筛选数据。

实现示例

以下是一个简单的动态城市级联菜单的实现示例：

HTML结构

<select id="country">
  <option value="">请选择国家</option>
</select>
<select id="province">
  <option value="">请选择省份</option>
</select>
<select id="city">
  <option value="">请选择城市</option>
</select>

JavaScript代码

document.addEventListener('DOMContentLoaded', function() {
  const countrySelect = document.getElementById('country');
  const provinceSelect = document.getElementById('province');
  const citySelect = document.getElementById('city');

  // 模拟从服务器获取国家数据
  const countries = [
    { id: '1', name: '中国' },
    { id: '2', name: '美国' }
  ];

  // 填充国家选项
  countries.forEach(country => {
    const option = document.createElement('option');
    option.value = country.id;
    option.textContent = country.name;
    countrySelect.appendChild(option);
  });

  // 国家选择变化时加载省份数据
  countrySelect.addEventListener('change', function() {
    const countryId = this.value;
    provinceSelect.innerHTML = '<option value="">请选择省份</option>';
    citySelect.innerHTML = '<option value="">请选择城市</option>';

    if (countryId) {
      // 模拟从服务器获取省份数据
      const provinces = getProvincesByCountryId(countryId);
      provinces.forEach(province => {
        const option = document.createElement('option');
        option.value = province.id;
        option.textContent = province.name;
        provinceSelect.appendChild(option);
      });
    }
  });

  // 省份选择变化时加载城市数据
  provinceSelect.addEventListener('change', function() {
    const provinceId = this.value;
    citySelect.innerHTML = '<option value="">请选择城市</option>';

    if (provinceId) {
      // 模拟从服务器获取城市数据
      const cities = getCitiesByProvinceId(provinceId);
      cities.forEach(city => {
        const option = document.createElement('option');
        option.value = city.id;
        option.textContent = city.name;
        citySelect.appendChild(option);
      });
    }
  });

  // 模拟获取省份数据的函数
  function getProvincesByCountryId(countryId) {
    // 这里应该是异步请求，为了示例简单直接返回静态数据
    if (countryId === '1') {
      return [
        { id: '101', name: '广东省' },
        { id: '102', name: '湖南省' }
      ];
    }
    return [];
  }

  // 模拟获取城市数据的函数
  function getCitiesByProvinceId(provinceId) {
    // 这里应该是异步请求，为了示例简单直接返回静态数据
    if (provinceId === '101') {
      return [
        { id: '1001', name: '广州市' },
        { id: '1002', name: '深圳市' }
      ];
    }
    return [];
  }
});