在前端开发中三级联动下拉框是非常常见的交互功能最典型的场景就是省市区选择也可以灵活改成游戏、技能、项目等自定义分类联动。今天我就用最通俗易懂的方式带大家用 jQuery JSON 实现一套可直接复用、无 bug、逻辑清晰的三级联动功能新手也能轻松看懂、直接运行。一、功能介绍本次实现的三级联动包含两大版本动态数据版读取本地 JSON 文件渲染省市区数据真实业务场景通用静态自定义版固定数据写游戏 / 技能 / 项目分类适合快速演示核心效果选择第一个下拉框省份 / 大类自动加载第二个下拉框城市 / 子类选择第二个下拉框城市 / 子类自动加载第三个下拉框区 / 详情切换上级选项时下级自动清空避免数据错乱二、完整代码实现HTML 结构页面布局使用 flex 布局让三个下拉框均匀排列样式简洁美观直接复制可用。html预览jQuery 三级联动下拉框!-- 引入本地 jQuery -- script src./jquery-3.4.1.js/script2. JS 核心逻辑动态 JSON 版 这是企业真实开发常用版本数据存在 JSON 文件中便于维护和修改。 javascript 运行 // 定义全局变量存储省市区数据 let data;// 读取本地 JSON 文件加载省份列表$.getJSON(“index.json”, function (jsonData) {data jsonData;let $province $(“[nameprovince]”);// 清空并添加默认选项$province.empty().append(‘请选择省份’);// 循环遍历 JSON 数据渲染省份 $.each(data, function (i, province) { $province.append(option value${i}${province.name}/option); });});// 选择省份 → 加载对应城市function showCity() {// 防止数据未加载完成报错if(!data) return;let provinceIndex $([nameprovince]).val(); let $city $([namecity]); let $district $([namedistrict]); // 清空下级下拉框 $city.empty().append(option value请选择城市/option); $district.empty().append(option value请选择区/option); // 渲染对应城市数据 if (provinceIndex ! ) { let cities data[provinceIndex].cities; $.each(cities, function (i, city) { $city.append(option value${i}${city.name}/option); }); }}// 选择城市 → 加载对应区县function showDistrict() {if(!data) return;let provinceIndex $([nameprovince]).val(); let cityIndex $([namecity]).val(); let $district $([namedistrict]); $district.empty().append(option value请选择区/option); // 渲染对应区县数据 if (provinceIndex ! cityIndex ! ) { let districts data[provinceIndex].cities[cityIndex].districts; $.each(districts, function (i, district) { $district.append(option value${i}${district}/option); }); }}3. 配套 JSON 文件格式index.jsonjson[{“name”: “北京市”,“cities”: [{“name”: “北京市”,“districts”: [“东城区”, “西城区”, “朝阳区”, “海淀区”]}]},{“name”: “上海市”,“cities”: [{“name”: “上海市”,“districts”: [“黄浦区”, “徐汇区”, “长宁区”]}]}]4. 自定义静态版游戏 / 技能 / 项目如果不需要 JSON 文件直接用这个版本修改数据就能用javascript运行// 大类切换加载子类function showCity() {let val $(“[nameprovince]”).val();let $city $(“[namecity]”);let $district $(“[namedistrict]”);$city.empty();$district.empty();switch (val) { case 1: $city.append(option value11原神/option); $city.append(option value12崩坏星穹铁道/option); break; case 2: $city.append(option value21HTML/option); $city.append(option value22CSS/option); break; case 3: $city.append(option value31网页项目/option); break; }}// 子类切换加载详情function showDistrict() {let type $(“[nameprovince]”).val();let val $(“[namecity]”).val();let $district $(“[namedistrict]”);$district.empty();if(type 1){ switch(val){ case 11: $district.append(option璃月/optionoption蒙德/option); break; } }}三、关键知识点讲解新手必看全局变量存储数据let data; 定义全局变量存储 JSON 读取到的所有省市区数据方便所有函数访问。异步加载注意事项$.getJSON 是异步请求必须判断 if(!data) return;防止数据没加载完成就调用函数报错。联动核心逻辑上级选择改变 → 清空所有下级根据选中的索引从数据源中找到对应子集循环渲染到下拉框中事件绑定使用 οnchange“showCity()” 实现选择变化时自动触发联动函数简单直观。四、常见错误避坑404 错误JSON 文件路径不正确确保和 HTML 放在同一目录语法报错括号不匹配、引号用错模板字符串必须用反引号 数据不显示未使用 $.each 循环遍历数据下级不清空切换上级时忘记清空下级下拉框导致数据叠加五、总结这套 jQuery 三级联动代码1 逻辑清晰注释完整新手极易理解2两套版本动态 JSON / 静态自定义满足不同场景3无 bug可直接复制到项目中使用4代码结构规范方便后期扩展修改不管是做省市区选择、商品分类联动还是自定义菜单联动这套代码都能轻松搞定是前端必备的小实战案例。