select的change事件实现联动本质是“一个下拉框选了，另一个跟着变”，核心为原生select+change监听，而非html5新标签；需用id/name定位、预存映射数据、清空重置options并处理空值边界。
用 select 的 change 事件监听选项变化
联动本质是“一个下拉框选了，另一个跟着变”。核心不是 HTML5 新特性，而是用原生 select 元素 + JavaScript 监听 change 事件触发更新。HTML5 没新增专门的联动标签，但支持更语义化的 data-* 属性来存关联数据。
关键点：
-
change比input更适合下拉框——只在用户真正切换选项后触发，避免误判 - 不要用
click或focus，它们无法准确捕获“选项已确定”这个状态 - 多个
select要加id或name，方便 JS 定位，比如id="province"和id="city"
用 dataset 或 JSON 预存二级数据
常见做法是把所有可选的二级项（如城市）提前存在 JS 对象里，而不是每次发请求。HTML5 的 dataset 可用来在 option 上挂载对应 ID，但仅适合极简场景；复杂联动建议用纯 JS 数据结构管理。
示例：省份→城市映射用对象组织，比反复查 DOM 快且可控
立即学习“前端免费学习笔记（深入）”；
const cityMap = {
"beijing": ["东城区", "西城区", "朝阳区"],
"shanghai": ["黄浦区", "徐汇区", "长宁区"],
"guangdong": ["广州", "深圳", "珠海"]
};
注意：
- 键名（如
"beijing"）要和一级select中option的value严格一致（大小写、中划线） - 如果数据量大或需实时更新，就得换成 AJAX 加载，此时要加 loading 状态和错误处理
- 别把整个城市数组塞进
data-cities属性里——JSON 字符串易出编码/转义问题，也难维护
动态清空并重置 select 的 options
联动时二级下拉必须清空旧选项再填新内容，否则会叠加。直接操作 select.innerHTML = "" 可行，但更稳妥的是用 select.length = 0 或循环删 select.remove(0)。
实操建议：
- 先移除所有
option，再用document.createElement("option")批量添加，比字符串拼接innerHTML更安全（防 XSS，也避免引号嵌套混乱） - 记得给每个新
option设置value和文本内容，否则提交表单时可能拿不到值 - 如果二级
select原本有默认提示项（如<option value="">请选择城市</option>），重置后应保留它，再追加真实选项
移动端 Safari 下 change 触发时机异常怎么办
iOS Safari 在某些版本中，select 弹出选择器后点击完成，change 事件可能延迟或不触发。这不是 HTML5 问题，而是浏览器实现差异。
绕过方案：
- 监听
blur事件作为兜底（但需配合防重复执行逻辑，比如加个isChanged标志） - 改用自定义下拉组件（如基于
div+aria-haspopup），完全控制交互流，不过成本高 - 最简单有效：加一句
select.focus(); select.blur();在初始化后强制触发一次，能修复部分 iOS 缓存导致的监听失效
真正容易被忽略的是：联动逻辑里没处理“用户又切回空值”这个情况——比如一级选了北京，二级填了朝阳区，然后一级又选了空选项（value=""），二级却没清空或没还原成初始提示。这个边界条件必须显式判断。
