用原生javascript实现二级联动下拉菜单，核心是监听一级select的change事件，根据选中省份动态更新二级select的option列表，并初始禁用二级菜单。
用 DOM 操作实现二级联动下拉菜单，核心是监听一级菜单的 change 事件，动态更新二级菜单的 option 选项。不需要框架，纯原生 JavaScript 就能搞定，关键是数据组织和 DOM 更新时机要准确。
准备结构化的地区数据
二级联动通常基于层级关系（比如省份→城市），建议用对象或数组嵌套方式组织数据，便于快速查找：
const regionData = {
"北京": ["东城区", "西城区", "朝阳区", "海淀区"],
"上海": ["黄浦区", "徐汇区", "长宁区", "静安区"],
"广东": ["广州", "深圳", "珠海", "东莞"],
"浙江": ["杭州", "宁波", "温州", "绍兴"]
};
这种键值对结构让根据选中的省份直接获取对应城市列表变得非常直接。
绑定一级下拉框的 change 事件
获取一级 <select></select> 元素，监听其变化，拿到用户选中的省份值：
- 用
document.getElementById或querySelector获取 DOM 元素 - 在
change回调中读取event.target.value（即选中的省份） - 注意：确保 HTML 中一级 select 的
value和数据对象的 key 一致
清空并重绘二级下拉菜单
每次一级选项变化后，需清空二级菜单原有选项，并插入新城市列表：
- 先清除二级
select的所有子节点：secondSelect.innerHTML = ''或遍历移除 - 用
regionData[selectedProvince]获取城市数组 - 遍历数组，为每个城市创建
option元素，设置textContent和value，再append到二级 select - 可额外添加一个默认提示项（如“请选择城市”），
disabled+selected提升体验
HTML 结构示例（配合 JS 使用）
保持语义清晰，id 要和 JS 中获取的一致：
<label>省份：</label> <select id="province"><option value="" disabled selected>请选择省份</option> <option value="北京">北京</option> <option value="上海">上海</option> <option value="广东">广东</option> <option value="浙江">浙江</option></select><label>城市：</label> <select id="city" disabled><option value="" disabled selected>请选择城市</option></select>
注意二级菜单初始设为 disabled，等一级有有效选择后再启用，避免误操作。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
