新手学 JS：从零实现省市区三级联动下拉框

作为刚入门 JavaScript 的新手最近我跟着教程敲了一个「省市区三级联动」的小案例从一开始对着代码一脸懵到最后能看到选择省份后城市、区县自动联动更新这个过程踩了不少坑但也把 JS 基础语法、DOM 操作、事件绑定这些知识点摸透了。今天就把这个案例的学习过程和心得分享给和我一样的新手为什么选这个案例对新手来说三级联动是超经典的入门案例既用到了 JS 数组、循环、条件判断这些基础语法又涉及 DOM 操作修改页面元素、事件绑定监听下拉框选择还能直观看到代码运行效果 —— 选省份时城市跟着变选城市时区县跟着变这种 “即时反馈” 能让我们清楚知道自己写的代码起作用了比单纯背语法有趣多了先拆解案例的核心逻辑先理清楚三级联动要实现的效果页面上有 3 个下拉框省份、城市、区县默认显示 “请选择”省份下拉框先加载好所有省份数据选省份后城市下拉框加载该省份对应的城市区县重置为默认选城市后区县下拉框加载该城市对应的区县。整个案例的代码分为两部分HTML 结构搭架子 JS 逻辑实现联动还用到了 jQuery 简化 DOM 选择不过核心逻辑还是原生 JS。逐行拆解核心代码新手友好版第一步HTML 搭架子先写 3 个下拉选择框用 id 标记方便 JS 获取元素默认选项设为 “不可选 默认选中”避免用户选空值html预览!-- 省份下拉框 -- select idsheng option value disabled selected-省份-/option /select !-- 城市下拉框 -- select idshi option value disabled selected-城市-/option /select !-- 区县下拉框 -- select idqu option value disabled selected-区县-/option /select这里要注意disabled是让默认选项不能选selected是默认选中这个选项value 为空是为了后续判断 “用户是否选了有效选项”。第二步准备省市区数据数组嵌套用数组存储省市区数据这是新手最容易晕的 “嵌套结构”但拆开来超简单javascript运行let arr[ { name: 北京市, // 省份名 city: [ // 该省份下的城市数组 { name: 北京市, // 城市名 qu: [西城区, 朝阳区, 海淀区] // 该城市下的区县数组 } ] }, { name: 广东省, city: [ { name: 广州市, qu: [天河区, 越秀区, 白云区] }, { name: 深圳市, qu: [南山区, 福田区, 宝安区] } ] } ]; 新手小技巧可以把这个数组看成 “套娃”—— 外层数组是所有省份每个省份是一个对象包含省份名 城市数组每个城市又是一个对象包含城市名 区县数组。第三步加载省份下拉框循环 DOM 追加先把所有省份加载到省份下拉框里用到for循环遍历数组再用appendjQuery或innerHTML原生添加选项javascript运行// jQuery获取省份下拉框元素$前缀方便区分jQuery对象 let $sheng $(#sheng); // 遍历省份数组 for (let i 0; i arr.length; i) { // 给省份下拉框加optionvalue存数组索引方便后续找对应城市 $sheng.append(option value i arr[i].name /option); } 关键给option的value赋值为数组索引比如北京市对应 i0广东省对应 i2后续选省份时通过这个索引就能找到该省份下的城市。第四步省份选择事件核心联动逻辑给省份下拉框绑定onchange事件选择选项时触发实现 “选省份更城市”javascript运行sheng.onchange function () { // 获取选中省份的value即数组索引 let num this.value; // 如果没选省份value为空重置城市和区县 if(num ){ shi.innerHTML option value disabled selected-请选择城市-/option; qu.innerHTML option value disabled selected-请选择区县-/option; return; // 终止后续代码 } // 重置城市下拉框准备加载对应城市 shi.innerHTML option value disabled selected-请选择城市-/option; // 遍历该省份下的城市数组 for (let i 0; i arr[num].city.length; i) { // 给城市下拉框加选项value存城市数组索引 shi.innerHTML option value i arr[num].city[i].name /option; } // 同时重置区县下拉框 qu.innerHTML option value disabled selected-请选择区县-/option; // 嵌套城市选择事件选城市更区县 shi.onchange function(){ let vals this.value; if (vals ) { qu.innerHTML option value disabled selected-请选择区县-/option; return; } // 重置区县下拉框加载对应区县 qu.innerHTML option value disabled selected-请选择区县-/option; for(let i 0; i arr[num].city[vals].qu.length; i){ qu.innerHTML option value i arr[num].city[vals].qu[i] /option; } } }这里是新手最容易卡壳的地方我拆两个关键点this.value 的含义this指向触发事件的下拉框比如省份下拉框this.value就是选中option的 value 值也就是我们存的数组索引嵌套事件把城市的onchange事件写在省份的onchange里是因为选不同省份时城市的列表不一样需要重新绑定事件。我踩过的那些坑新手避坑指南混淆 jQuery 和原生 DOM 写法一开始我既用$(#sheng)jQuery又用sheng.onchange原生还以为会报错后来才知道jQuery 对象可以转原生$(#sheng)[0]原生元素也能直接用 id 调用HTML 里 id 为 sheng 的元素全局变量就是 sheng数组索引越界刚开始把arr[num].city写成arr[i].city选省份后直接报错查控制台才发现是变量名写错 —— 新手一定要注意循环变量和索引变量的区分忘记重置下拉框一开始没写innerHTML重置选完广东省再选北京市城市下拉框会叠加两个省份的城市后来才明白每次选新省份要先清空旧的城市 / 区县选项分号 / 引号写错拼接option标签时把和混着用比如option value i 写成option value i 直接导致选项加载失败新手写字符串拼接一定要仔细新手学习小建议先抄后改一开始不用自己写先照着代码敲一遍跑通后再改 —— 比如加个 “浙江省” 的数据改改默认提示文字看看代码哪里要对应调整用控制台调试按 F12 打开浏览器控制台报错时先看 “哪一行错了”“什么错误”比如Uncaught TypeError就是类型错ReferenceError就是变量没定义新手 80% 的错误都能靠控制台找到拆解开学把案例拆成 “加载省份、省份联动城市、城市联动区县” 三个小功能逐个实现不要想着一步到位理解比背代码重要比如为什么用数组存数据为什么给 option 加 value搞懂 “为什么”下次换个场景比如商品分类联动也能写出来。最后想说的这个三级联动案例看起来简单但把 JS 入门的核心知识点都串起来了数组、循环、条件判断、DOM 操作、事件绑定。我从敲完代码跑不通到最后能自己改数据、调样式花了差不多半天时间过程中无数次想放弃但每次解决一个小问题比如终于让城市跟着省份变了就特别有成就感。作为 JS 新手不用怕写得慢、写得错只要动手敲、敢调试哪怕是改一行代码看一次效果也比光看教程强。这个三级联动案例就是很好的入门练手项目推荐和我一样的新手都试试