JavaScript 中怎么用页面交互实现一个级联省市区选择器交互-js教程-PHP中文网

级联省市区选择器需监听前级select的change事件动态更新后级选项，核心包括结构化数据组织、按需或预加载、状态联动与防错处理；示例使用三级嵌套对象存储，每次切换清空并禁用下级，再填充启用。

javascript 中怎么用页面交互实现一个级联省市区选择器交互

用 JavaScript 实现级联省市区选择器，核心是监听前一级 <select></select> 的 change 事件，动态更新后一级的选项内容。关键在于数据组织、异步加载（或本地预置）、状态联动和防错处理。

准备结构化的地区数据

推荐使用三级嵌套对象或数组形式存储，例如：

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

实际项目中建议从接口按需加载（如选中省再请求对应城市），避免一次性加载全部数据影响首屏性能。若数据量小（如中国约34省、300+地级市、2800+区县），也可预加载 JSON 文件或内联到 JS 中。

绑定 change 事件并动态渲染下拉项

为每个 <select></select> 绑定事件，注意清空后续下拉框并禁用，防止用户误操作：

Java Maven Code Review

审查Java Maven项目（ZIP压缩包或GitLab仓库URL），检查代码规范、命名、模块边界、可维护性问题以及重复代码。

下载

监听省份 select 的 change：获取选中的省 code，用它查出所有城市，填充到城市 select，并启用它
监听城市 select 的 change：同理，查出对应区县，填充到区县 select 并启用
每次切换上级时，重置下级的 value 为空，并清空其 <option></option>（保留默认提示项如“请选择城市”）

HTML 结构与基础 JS 示例

保持语义化结构，用 data-level 或 class 区分层级便于操作：

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

JS 片段示例（基于预置 data）：

document.getElementById('province').addEventListener('change', function() {
  const provCode = this.value;
  const citySelect = document.getElementById('city');
  const areaSelect = document.getElementById('area');

  // 清空并禁用下级
  citySelect.innerHTML = '<option value="">请选择城市</option>';
  citySelect.disabled = true;
  areaSelect.innerHTML = '<option value="">请选择区县</option>';
  areaSelect.disabled = true;

  if (!provCode) return;

  const cities = areaData[provCode]?.cities || {};
  for (const [code, info] of Object.entries(cities)) {
    const opt = document.createElement('option');
    opt.value = code;
    opt.textContent = info.name;
    citySelect.appendChild(opt);
  }
  citySelect.disabled = false;
});

// 城市 change 同理，查 cities[code].areas 填充区县