原生 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)))
}
相关推荐
子伟-H52 小时前
App开发框架调研对比
前端
桃子不吃李子2 小时前
axios的二次封装
前端·学习·axios
SteveJrong2 小时前
面试题 - JavaScript
前端·javascript·面试·ecmascript·基础·找工作·红宝书
阿金要当大魔王~~2 小时前
uniapp 页面标签 传值 ————— uniapp 定义 接口
前端·javascript·uni-app·1024程序员节
全栈软件开发2 小时前
uniapp三端影视源码苹果cms自动采集电影视频网站源码前端源码带VIP
前端·uni-app·影视源码
chxii2 小时前
10.4FormData :前端文件上传与表单数据处理的核心工具
前端
AntBlack3 小时前
不当韭菜 : 好像真有点效果 ,想藏起来自己用了
前端·后端·python
楊无好3 小时前
react中props的使用
前端·react.js·前端框架
一个处女座的程序猿O(∩_∩)O3 小时前
Vue-Loader 深度解析:原理、使用与最佳实践
前端·javascript·vue.js
一点一木3 小时前
火山方舟 Responses API 实战指南:从概念到「公司尽调 Dossier 生成器」
前端·人工智能·api