javascript省市级联菜单

JavaScript创建省市联动菜单通常涉及到前端数据绑定和事件处理。这种菜单设计是为了让用户在选择省份之后，动态加载该省份下的所有城市选项。以下是简单的步骤：

1. **HTML结构**:

<select id="province" onchange="loadCities()"> <!-- 省份选择 -->
  <option value="">请选择省份</option>
  <!-- 填充省份数据 -->
</select>

<select id="city" style="display:none;"> <!-- 城市选择，初始隐藏 -->
  <option value="">请选择城市</option>
</select>

2. **JavaScript逻辑**:

// 假设有一个数组存放省级数据
var provinces = [
  { id: '01', name: '北京' },
  { id: '02', name: '上海' },
  // ...
];

function loadCities() {
  var provinceSelect = document.getElementById('province');
  var citySelect = document.getElementById('city');

  // 清空城市列表
  citySelect.innerHTML = '';

  if (provinceSelect.value) {
    // 获取选中的省份
    var selectedProvince = provinces.find(prov => prov.id === provinceSelect.value);
    
    // 如果有匹配的省份，填充城市列表
    if (selectedProvince) {
      var cities = getCityList(selectedProvince.id); // 模拟从服务器获取城市数据

      cities.forEach(city => {
        var option = document.createElement('option');
        option.value = city.id;
        option.text = city.name;
        citySelect.appendChild(option);
      });
      
      // 展示城市选择框
      citySelect.style.display = 'block';
    }
  } else {
    // 非首次加载或未选择省份时，隐藏城市选择框
    citySelect.style.display = 'none';
  }
}

// 假设getCityList是一个异步函数，返回指定省份的城市数组
function getCityList(provinceId) {
  return fetch(`/api/provinces/${provinceId}/cities`).then(response => response.json());
}