原生 JS 打造三级联动

后台表单、招生官网、招聘系统都离不开「省-市-学校」三连下拉。本文用 js原生代码实现一套零依赖、可复用、可扩展的三级联动,数据与渲染彻底解耦,换一批数据也能秒上线。

一、数据约定

把全国行政区划抽象成三层嵌套对象:

js 复制代码
const province = { '11': '北京市', '12': '天津市', ... }
const city = {
  '11': { '014': '天津市' },
  '12': { 
    '015': '漳州市', 
    '016': '厦门市',
    ... 
  }
}
const allschool = {
  '015': ['闽南师范大学', '厦门大学嘉庚学院', ...],
  '016': ['厦门大学', '集美大学', ...]
}
  • 一级 key → 省编号
  • 二级对象 → 市编号 : 市名称
  • 三级数组 → 学校名称列表

数据结构一旦固定,渲染逻辑永远不变。

二、链式渲染三步走

1.初始化:渲染省

js 复制代码
for (const code in province) {
  provinceDOM.append(new Option(province[code], code))
}

new Option(text, value)createElement('option') 少写两行,还能自动映射 <option> 的 text 与 value。

2.省变化 → 渲染市 + 默认学校

js 复制代码
provinceDOM.onchange = () => {
  cityDOM.innerHTML = schoolDOM.innerHTML = ''   // 清空下游
  const cityObj = city[provinceDOM.value]
  if (!cityObj) return                           // 边界:无数据
  for (const code in cityObj) {
    cityDOM.append(new Option(cityObj[code], code))
  }

  // 立即渲染默认市下的学校
  const schoolArr = allschool[cityDOM.value] || []
  schoolArr.forEach(name => schoolDOM.append(new Option(name)))
}

清空下游是防止「幽灵选项」:用户先选北京,再选天津,若不重置,城市下拉会残留「和平区」。

3.市变化 → 只渲染学校

js 复制代码
cityDOM.onchange = () => {
  schoolDOM.innerHTML = ''
  const schoolArr = allschool[cityDOM.value] || []
  schoolArr.forEach(name => schoolDOM.append(new Option(name)))
}

市变化时不再清空省,因为上游已经确定;只处理下游,减少 DOM 抖动。

三、边界与优化细节

省无数据

if (!cityObj) return 直接退出,下拉保持空白,避免后续报错。

市无学校

|| [] 兜底,防止 undefined.forEach 抛错;用户看到的是空下拉,逻辑一致。

异步数据

onchange 换成 fetch('/api/city/' + provCode).then(...) 即可接入后端分页,前端逻辑不变。

键盘可用

<select> 原生支持上下键、回车、空格,无需额外代码即可满足无障碍需求。

四、代码示例

1.html骨架

html 复制代码
  <select id="province"></select>
  <select id="city"></select>
  <select id="school"></select>

2.核心js

js 复制代码
const p = document.getElementById('province')
const c = document.getElementById('city')
const s = document.getElementById('school')

// 1. 渲染省
for (const code in province) p.append(new Option(province[code], code))

// 2. 省变化 → 市 + 默认学校
p.onchange = () => {
  c.innerHTML = s.innerHTML = ''
  const cityObj = city[p.value]
  if (!cityObj) return
  for (const code in cityObj) c.append(new Option(cityObj[code], code))
  const schoolArr = allschool[c.value] || []
  schoolArr.forEach(name => s.append(new Option(name)))
}

// 3. 市变化 → 学校
c.onchange = () => {
  s.innerHTML = ''
  const schoolArr = allschool[c.value] || []
  schoolArr.forEach(name => s.append(new Option(name)))
}
相关推荐
李鸿耀19 分钟前
主题换肤指南:设计到开发的完整实践
前端
带娃的IT创业者5 小时前
TypeScript + React + Ant Design 前端架构入门:搭建一个 Flask 个人博客前端
前端·react.js·typescript
二十雨辰6 小时前
vite如何处理项目中的资源
开发语言·javascript
非凡ghost6 小时前
MPC-BE视频播放器(强大视频播放器) 中文绿色版
前端·windows·音视频·软件需求
Stanford_11066 小时前
React前端框架有哪些?
前端·微信小程序·前端框架·微信公众平台·twitter·微信开放平台
洛可可白6 小时前
把 Vue2 项目“黑盒”嵌进 Vue3:qiankun 微前端实战笔记
前端·vue.js·笔记
学习同学7 小时前
从0到1制作一个go语言游戏服务器(二)web服务搭建
服务器·前端·golang
-D调定义之崽崽7 小时前
【初学】调试 MCP Server
前端·mcp
四月_h8 小时前
vue2动态实现多Y轴echarts图表,及节点点击事件
前端·javascript·vue.js·echarts
文心快码BaiduComate8 小时前
用Zulu轻松搭建国庆旅行4行诗网站
前端·javascript·后端