城市级联下拉菜单联动的核心是“数据驱动 + 事件监听 + 动态渲染”：选中省份后，根据其code过滤对应城市列表并动态填充市级下拉框；需初始化省份选项、绑定change事件、清空重填城市项，并支持异步加载、本地存储记忆和无障碍优化。
城市级联下拉菜单的联动，核心是“数据驱动 + 事件监听 + 动态渲染”：选中省份后，根据其 ID 或名称，从数据中过滤出对应的城市列表，并清空并重填市级下拉框。
准备结构化的省市数据
最简单的方式是用嵌套对象或数组。推荐使用数组形式，每个省包含 code（唯一标识）、name 和 cities（城市数组）：
const provinceData = [
{
code: 'zhejiang',
name: '浙江省',
cities: [
{ code: 'hangzhou', name: '杭州市' },
{ code: 'ningbo', name: '宁波市' },
{ code: 'wenzhou', name: '温州市' }
]
},
{
code: 'jiangsu',
name: '江苏省',
cities: [
{ code: 'nanjing', name: '南京市' },
{ code: 'suzhou', name: '苏州市' }
]
}
];
数据可本地定义，也可通过 API 异步加载（首次加载省份，选中后再请求对应城市）。
绑定省份选择事件并动态填充城市
监听省份 的 change 事件，获取选中的省 code，查找到对应城市数组，再遍历生成 插入市级下拉框：
const selectProvince = document.getElementById('province');
const selectCity = document.getElementById('city');
selectProvince.addEventListener('change', function() {
const selectedCode = this.value;
const province = provinceData.find(p => p.code === selectedCode);
// 清空城市下拉框
selectCity.innerHTML = '<option value="">请选择城市</option>';
// 填充城市选项
if (province && province.cities.length) {
province.cities.forEach(city => {
const option = document.createElement('option');
option.value = city.code;
option.textContent = city.name;
selectCity.appendChild(option);
});
}
});
初始化时预设省份选项
页面加载后，需先渲染省份下拉项，否则用户无从选择：
- 遍历 provinceData，为每个省创建
- 设置默认选中项（如第一个），并手动触发一次 change 事件，让城市框同步初始化
- 可加 loading 状态或禁用城市框，直到省份选中才启用
进阶建议（按需添加）
- 支持异步加载：省份 change 后调用 fetch('/api/cities?province=zhejiang')，成功后再渲染城市
- 记忆上次选择：用 localStorage 存储用户最后选的省/市 code，刷新后自动回填
- 搜索兼容性：城市多时可搭配 input + datalist 或引入轻量级下拉库（如 TomSelect）提升体验
- 无障碍优化：为两个 select 添加 aria-label，城市框设置 aria-disabled 初始状态
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
