JavaScript 中怎么实现表单中省市区的三级联动-js教程-PHP中文网

javascript实现省市区三级联动的核心是监听上级change事件动态更新下级选项，依赖静态json数据、合理事件绑定与dom操作，首次加载后缓存数据，逐级清空并启用下拉框，支持重置、加载提示和本地记忆功能。

javascript 中怎么实现表单中省市区的三级联动

JavaScript 实现省市区三级联动，核心是通过监听上级下拉框的 change 事件，动态更新下级下拉框的选项。关键在于数据结构设计、事件绑定和 DOM 更新逻辑，不依赖后端也能跑通（可用静态 JSON 数据）。

准备省市区层级数据

最简单的方式是引入一份完整的三级 JSON 数据（如国家统计局最新编码数据），结构类似：

[
  {
    "code": "110000",
    "name": "北京市",
    "cities": [
      {
        "code": "110100",
        "name": "市辖区",
        "areas": [
          {"code": "110101", "name": "东城区"},
          {"code": "110102", "name": "西城区"}
        ]
      }
    ]
  }
]

可将该数据存为 areaData.js 或直接内联在页面中（小项目适用）。注意：避免每次请求都拉取全量数据，首次加载后缓存即可。

HTML 结构：三个 `<select></select>` 元素

确保每个下拉框有唯一 id，并初始禁用下级（防止误选）：

Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

<select id="province"><option value="">请选择省份</option></select><select id="city" disabled><option value="">请选择城市</option></select><select id="area" disabled><option value="">请选择区县</option></select>

JS 逻辑：逐级绑定与清空

使用原生 JS 即可，无需框架。主要步骤：

加载完数据后，用 province 下拉框填充所有省级选项
给 #province 绑定 change 事件：清空并启用 #city，填入对应城市的 cities 数组
给 #city 绑定 change 事件：清空并启用 #area，填入对应 areas 列表
每次切换上级时，自动清空所有下级选项并重置禁用状态（例如选新省 → 城市变灰 + 清空 + 区县也变灰 + 清空）

示例关键代码片段：

const provinceSel = document.getElementById('province');
const citySel = document.getElementById('city');
const areaSel = document.getElementById('area');

// 初始化省份
areaData.forEach(p => {
  const opt = document.createElement('option');
  opt.value = p.code;
  opt.textContent = p.name;
  provinceSel.appendChild(opt);
});

provinceSel.addEventListener('change', function() {
  const provCode = this.value;
  const prov = areaData.find(p => p.code === provCode);
  
  // 清空并禁用下两级
  citySel.innerHTML = '<option value="">请选择城市</option>';
  areaSel.innerHTML = '<option value="">请选择区县</option>';
  citySel.disabled = !prov;
  areaSel.disabled = true;

  if (prov && prov.cities) {
    prov.cities.forEach(c => {
      const opt = document.createElement('option');
      opt.value = c.code;
      opt.textContent = c.name;
      citySel.appendChild(opt);
    });
    citySel.disabled = false;
  }
});

citySel.addEventListener('change', function() {
  const cityCode = this.value;
  const provCode = provinceSel.value;
  const prov = areaData.find(p => p.code === provCode);
  const city = prov?.cities?.find(c => c.code === cityCode);

  areaSel.innerHTML = '<option value="">请选择区县</option>';
  areaSel.disabled = !city;

  if (city && city.areas) {
    city.areas.forEach(a => {
      const opt = document.createElement('option');
      opt.value = a.code;
      opt.textContent = a.name;
      areaSel.appendChild(opt);
    });
  }
});