js使用数组方式实现省市级联效果

JavaScript中通过数组的方式实现省市级联效果，通常涉及到数据结构的设计和动态渲染的选择。这种效果通常是模拟下拉菜单的形式，用于让用户选择地区。下面是一个简单的示例：

// 定义省级联数据
const provinces = ['北京市', '天津市', '河北省', ...]; // 全部省份

// 定义市级别联数据，初始时每个省份都是空数组，实际应用中可根据需要填充
const cities = [
  { provinceId: '', cities: [] }, // 省级联的根节点，provinceId为空表示所有省份
  { provinceId: '010000', cities: [] }, // 模拟第一个省份的ID和空的城市列表
  ...
];

// 初始化页面显示的省级联选项
function renderProvinces(provincesList) {
  // 渲染HTML代码，如使用<select>
  provincesList.innerHTML = provinces.map(province => `<option value="${province}">${province}</option>`).join('');
}

// 当用户选择一个省份时，更新城市数据并渲染
function handleProvinceChange(event) {
  const selectedProvince = event.target.value;
  cities.forEach(city => {
    if (city.provinceId === '') {
      city.cities = provinces.filter(pro => pro === selectedProvince).map(pro => ({ provinceId: pro, cities: [] }));
    } else {
      city.cities = [];
    }
  });
  renderCities(cities);
}

// 类似地，你可以定义renderCities函数来渲染城市列表
// ...其他功能如初始化、双向绑定等...

// 初始化省级联渲染
renderProvinces(document.getElementById('province-select'));

// 监听省级联的改变事件
document.getElementById('province-select').addEventListener('change', handleProvinceChange);